@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: light;
  --color-paper: #f7f3ea;
  --color-paper-deep: #ede6d8;
  --color-surface: #fffaf1;
  --color-surface-plain: #ffffff;
  --color-ink: #191713;
  --color-ink-soft: #3b352c;
  --color-muted: #82796b;
  --color-hairline: #dfd6c8;
  --color-wash: #f0eadf;
  --color-focus: #2b2720;
  --shadow-soft: 0 18px 54px rgba(45, 38, 28, 0.07);
  --shadow-lift: 0 16px 42px rgba(45, 38, 28, 0.1);
  --motion-soft: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-page: 520ms cubic-bezier(0.16, 1, 0.3, 1);
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 16px;
  --style-keyline: #c9c9c9;
  --style-frame-color: #fff;
  --style-frame: inset 0 0 0 2px var(--style-frame-color);
  --style-thumbnail-radius: 5px;
  --style-panel-radius: 7px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --container: 1480px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --style-keyline: #000;
  --style-frame-color: #000;
  --color-paper: #161512;
  --color-paper-deep: #222019;
  --color-surface: #1d1b17;
  --color-surface-plain: #24211c;
  --color-ink: #f4efe5;
  --color-ink-soft: #d8d0c1;
  --color-muted: #a69b88;
  --color-hairline: #383329;
  --color-wash: #28241e;
  --color-focus: #f4efe5;
  --shadow-soft: 0 18px 54px rgba(0, 0, 0, 0.24);
  --shadow-lift: 0 16px 42px rgba(0, 0, 0, 0.34);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

a,
button,
.specimen-card,
.collection-card,
.style-card,
.explore-card,
.style-hero-media,
.composer,
.preview-panel,
img {
  transition:
    background-color var(--motion-soft),
    border-color var(--motion-soft),
    box-shadow var(--motion-soft),
    color var(--motion-soft),
    opacity var(--motion-soft),
    transform var(--motion-soft);
}

.shell {
  width: min(var(--container), calc(100vw - 40px));
  margin: 0 auto;
  padding: 22px 0 52px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
  padding: var(--space-3) 0;
  background: color-mix(in srgb, var(--color-paper) 86%, transparent);
  backdrop-filter: blur(18px);
}

.page-transition.page-entering {
  animation: page-fade-in var(--motion-page) both;
}

.page-transition.page-entering > * {
  animation: content-rise var(--motion-page) 70ms both;
}

.page-transition.page-entering .explore-card,
.page-transition.page-entering .specimen-card,
.page-transition.page-entering .collection-card {
  animation: item-fade-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: min(calc(var(--item-index, 0) * 26ms), 260ms);
}

.explore-card.batch-entering {
  animation: item-fade-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: min(calc((var(--item-index, 0) - 24) * 18ms), 160ms);
}

.recent-grid .specimen-card:nth-child(1),
.collection-grid .collection-card:nth-child(1) {
  --item-index: 0;
}

.recent-grid .specimen-card:nth-child(2),
.collection-grid .collection-card:nth-child(2) {
  --item-index: 1;
}

.recent-grid .specimen-card:nth-child(3),
.collection-grid .collection-card:nth-child(3) {
  --item-index: 2;
}

.recent-grid .specimen-card:nth-child(4),
.collection-grid .collection-card:nth-child(4) {
  --item-index: 3;
}

.recent-grid .specimen-card:nth-child(5),
.collection-grid .collection-card:nth-child(5) {
  --item-index: 4;
}

.recent-grid .specimen-card:nth-child(6),
.collection-grid .collection-card:nth-child(6) {
  --item-index: 5;
}

.recent-grid .specimen-card:nth-child(n + 7),
.collection-grid .collection-card:nth-child(n + 7) {
  --item-index: 6;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes content-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes item-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-left,
.brand,
.primary-nav,
.topbar-actions,
.profile-menu {
  display: flex;
  align-items: center;
}

.nav-left {
  gap: var(--space-5);
  min-width: 0;
}

.brand {
  gap: 10px;
  font-size: 18px;
  font-weight: 650;
}



.brand-mark {
  display: grid;
  place-items: center;
  width: 37.2px;
  height: 37.2px;
  font-family: var(--font-serif);
  font-size: 17px;
}
.brand-mark img { display:block; width:37.2px; height:37.2px; object-fit:contain; }

.primary-nav {
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.primary-nav :is(button, a[data-category-link]),
.mobile-nav-about,
.about-link {
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 7px 12px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.primary-nav :is(button, a[data-category-link]).active,
.primary-nav :is(button, a[data-category-link]):hover,
.mobile-nav-about.active,
.mobile-nav-about:hover,
.about-link.active,
.about-link:hover {
  color: var(--color-ink);
}

.menu-toggle,
.mobile-nav-close,
.mobile-nav-about,
.mobile-nav-tools {
  display: none;
}

.topbar-actions {
  justify-content: flex-end;
  gap: var(--space-3);
  min-width: 0;
}

.header-credits {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 34px;
  border: 1px solid var(--color-hairline);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  padding: 7px 11px;
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.header-credits strong {
  color: var(--color-ink);
  font-size: 13px;
}

.header-credits:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

@media (max-width: 760px) {
  .header-credits span { display: none; }
  .header-credits { min-width: 34px; justify-content: center; padding-inline: 9px; }
  .topbar-actions .upgrade-link { display: none; }
}

.search-form {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 38px;
  min-width: 0;
  overflow: hidden;
  transition: width var(--motion-soft);
}

.mobile-search-form {
  position: relative;
}

.search-form.open,
.search-form:focus-within {
  width: min(230px, 32vw);
}

.search-form input {
  width: 100%;
  min-height: 38px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  padding-left: 38px;
  text-align: left;
  opacity: 0;
  transform: translateX(10px);
  transition:
    opacity var(--motion-soft),
    transform var(--motion-soft);
}

.search-form.open input,
.search-form:focus-within input {
  opacity: 1;
  transform: translateX(0);
}

.search-toggle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-muted);
  padding: 0;
}

.search-toggle:hover {
  color: var(--color-ink);
}

.search-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--color-muted);
  border-radius: 50%;
  transform: translateY(-56%);
  pointer-events: none;
}

.search-icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 6px;
  height: 1.5px;
  border-radius: 999px;
  background: var(--color-muted);
  transform: rotate(45deg);
  transform-origin: center;
}

.profile-menu {
  position: relative;
  justify-content: flex-end;
  gap: var(--space-2);
}

.profile-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-height: 38px;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  padding: 0;
}

.profile-button.pro-member {
  box-shadow: 0 0 0 3px #f1d21a;
}
.header-signup { min-height:36px; border:1px solid var(--color-ink); border-radius:999px; background:transparent; color:var(--color-ink); padding:7px 14px; font:inherit; font-size:12px; font-weight:700; }
.header-signup:hover,.header-signup:focus-visible { background:var(--color-ink); color:var(--color-paper); }
.mobile-header-signup { font-size:14px; }

.profile-identity { display:flex; align-items:center; gap:7px; }
.header-plan-label { color:var(--color-muted); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.upgrade-link {
  display:inline-flex;
  align-items:center;
  min-height:32px;
  border:1px solid #111;
  border-radius:999px;
  background:#111;
  padding:6px 11px;
  color:#fff;
  font-size:11px;
  font-weight:700;
  text-decoration:none;
}
.upgrade-link:hover,.upgrade-link.active { background:#2b2b2b; color:#fff; }
.mobile-nav-account { display:none; }

.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  display: grid;
  gap: var(--space-3);
  width: 190px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: var(--space-4);
  box-shadow: var(--shadow-lift);
}

.theme-options {
  display: grid;
  gap: 6px;
}

.theme-options button,
.filter-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border-color: transparent;
  background: transparent;
  color: var(--color-muted);
  justify-content: flex-start;
  padding: 8px 10px;
}

.theme-options button.active,
.theme-options button:hover,
.filter-list button.active,
.filter-list button:hover {
  background: var(--color-wash);
  color: var(--color-ink);
}

.theme-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1.4px solid currentColor;
  border-radius: 50%;
}

.light-icon {
  box-shadow:
    0 -5px 0 -3px currentColor,
    0 5px 0 -3px currentColor,
    5px 0 0 -3px currentColor,
    -5px 0 0 -3px currentColor;
}

.light-icon::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: currentColor;
}

.dark-icon::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-surface);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.section {
  margin-top: var(--space-8);
  scroll-margin-top: 112px;
}

.section:first-of-type {
  margin-top: 0;
}

.eyebrow {
  margin: 0;
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section-head {
  display: grid;
  gap: var(--space-2);
  max-width: 760px;
  margin-bottom: var(--space-3);
}

.section-head h2,
.hero-copy h1 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-weight: 650;
  letter-spacing: 0;
}

.section-head h2 {
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.08;
}

.hero-grid {
  display: block;
  min-height: auto;
}

.hero-copy {
  display: block;
  padding-bottom: var(--space-3);
}

.hero-copy h1 {
  max-width: 520px;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.06;
}

.lede {
  max-width: 430px;
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.48;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.button-link,
button {
  min-height: 44px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-surface);
  padding: 11px 16px;
  font-weight: 700;
}

.secondary-link,
button.secondary {
  border-color: var(--color-hairline);
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  color: var(--color-ink);
}

.hero-board {
  columns: 4 220px;
  column-gap: var(--space-3);
}

.hero-board .specimen-card {
  margin-bottom: var(--space-3);
}

.specimen-grid,
.recent-grid {
  columns: 4 220px;
  column-gap: var(--space-4);
}

.rail-grid {
  columns: 2 220px;
  column-gap: var(--space-4);
}

.specimen-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--space-4);
  break-inside: avoid;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.specimen-card a {
  display: block;
  height: 100%;
}

.specimen-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: var(--color-wash);
}

.hero-board .specimen-card img {
  border-radius: var(--radius-xs);
}

.specimen-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}

.specimen-card:hover img,
.style-card:hover img,
.collection-mosaic a:hover img,
.collection-hero-mosaic a:hover img {
  transform: scale(1.015);
}

.specimen-meta {
  display: grid;
  gap: 7px;
  padding: var(--space-4);
}

.hero-board .specimen-meta {
  display: none;
}

.specimen-meta span,
.collection-card span {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
}

.specimen-meta h3,
.collection-card h3 {
  margin: 0;
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1.12;
}

.specimen-meta p,
.collection-card p {
  margin: 0;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.48;
}

.specimen-card.compact .specimen-meta p {
  display: none;
}

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

.collection-card {
  display: grid;
  gap: var(--space-4);
  min-height: 100%;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: rgba(255, 253, 248, 0.8);
  padding: var(--space-4);
}

.collection-card:hover {
  border-color: rgba(25, 23, 19, 0.18);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.collection-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.collection-mosaic a,
.collection-hero-mosaic a {
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-xs);
}

.collection-mosaic img,
.collection-hero-mosaic img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  object-fit: cover;
  background: var(--color-wash);
}

.collection-mosaic a:hover img,
.collection-hero-mosaic a:hover img {
  box-shadow: var(--shadow-lift);
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-5);
  align-items: start;
}

.browse-panel {
  position: sticky;
  top: 112px;
  display: grid;
  gap: var(--space-4);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-surface);
  padding: var(--space-5);
}

.browse-panel .eyebrow {
  color: rgba(255, 253, 248, 0.66);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag-cloud span {
  border: 1px solid rgba(255, 253, 248, 0.22);
  border-radius: 999px;
  padding: 9px 11px;
  color: var(--color-surface);
  font-size: 12px;
}

.system-message {
  color: #9f1d1d;
}

.explore-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.explore-main {
  min-width: 0;
}

.explore-intro {
  display: grid;
  gap: 3px;
  max-width: 640px;
  margin: 0 0 var(--space-6);
  color: var(--color-ink);
  font-size: clamp(18px, 2vw, 27px);
  font-weight: 720;
  line-height: 1.18;
}

.explore-intro strong,
.explore-intro span {
  display: block;
}

.explore-intro span {
  font-weight: 400;
}


.explore-grid {
  --masonry-columns: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: 0;
  grid-auto-rows: 1px;
  align-items: start;
}

.explore-card {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 8px;
  break-inside: avoid;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.explore-card:hover,
.explore-card.active {
  border-color: var(--color-hairline);
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.explore-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xs);
  background: var(--color-wash);
}

.style-save-button {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  border: 1px solid var(--color-ink);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
  color: var(--color-ink);
  opacity: 0;
  padding: 0;
  pointer-events: none;
  transform: translateY(-3px) scale(0.96);
  backdrop-filter: blur(8px);
}

.style-save-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.style-save-button:not(.saved):hover,
.style-save-button:not(.saved):focus-visible {
  background: var(--color-ink);
  color: var(--color-surface);
}

.style-save-button.saved {
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  color: var(--color-ink);
  opacity: 1;
  pointer-events: auto;
}

.style-save-button.saved:hover,
.style-save-button.saved:focus-visible {
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  color: var(--color-ink);
}

.style-save-button.saved svg {
  fill: currentColor;
}

.explore-card:hover .style-save-button,
.explore-card:focus-within .style-save-button {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.explore-card-meta {
  display: grid;
  gap: 6px;
  padding: 10px 2px 0;
}

.explore-card-meta span {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
}

.explore-card-meta h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.15;
}

.explore-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: 4px;
}

.explore-card-actions a,
.explore-card-actions button {
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  padding: 0;
  font-size: 12px;
  font-weight: 650;
}

.explore-card-actions a:hover,
.explore-card-actions button:hover {
  color: var(--color-ink);
}

.explore-inline-generator {
  margin: var(--space-6) -8px -8px;
  border-top: 1px solid var(--color-hairline);
  cursor: default;
  overflow: hidden;
  transform-origin: top;

}

.explore-inline-generator .composer {
  padding: var(--space-5) 8px var(--space-4);
}

.explore-inline-generator .preview-panel {
  grid-template-rows: minmax(240px, 42vh) auto;
}

.explore-card .explore-inline-generator {
  display: grid;
  width: calc(100% + 16px);
  margin: var(--space-6) -8px -8px;
}

.explore-card .explore-inline-generator .composer {
  padding: var(--space-5) 8px var(--space-4);
}

.result-state {
  margin: 0 0 var(--space-4);
  color: var(--color-muted);
  font-size: 13px;
}

.empty-results {
  display: grid;
  gap: var(--space-2);
  max-width: 460px;
  color: var(--color-muted);
}

.about-page {
  display: grid;
  gap: clamp(56px, 7vw, 96px);
  max-width: 1180px;
  padding: clamp(24px, 4vw, 60px) 0 clamp(48px, 8vw, 112px);
}

.about-hero {
  display: grid;
  gap: clamp(28px, 5vw, 68px);
}

.about-hero h1 {
  max-width: 1040px;
  margin: 0;
  font-size: clamp(54px, 8vw, 116px);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.065em;
}

.about-hero-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 72px);
  max-width: 940px;
  margin-left: auto;
  color: var(--color-ink-soft);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
}

.about-hero-copy p,
.about-section-copy p {
  margin: 0;
}

.about-section {
  display: grid;
  grid-template-columns: minmax(170px, .62fr) minmax(0, 1.7fr);
  gap: clamp(32px, 8vw, 128px);
  align-items: start;
}

.about-section h2 {
  position: sticky;
  top: 96px;
  margin: 5px 0 0;
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.about-section-copy {
  display: grid;
  gap: 22px;
  max-width: 760px;
  color: var(--color-ink-soft);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.62;
}

.about-pullquote {
  margin: clamp(18px, 4vw, 50px) 0 !important;
  color: var(--color-ink);
  font-size: clamp(34px, 5.25vw, 72px);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1.02;
}

.about-section-copy a,
.use-notice-page a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.about-section-copy a:hover { color: var(--color-ink); }
.about-section-copy a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

.about-note {
  border-top: 1px solid var(--color-hairline);
  padding-top: clamp(32px, 5vw, 64px);
}
.about-note h2 { color: var(--color-muted); }
.about-note .about-section-copy { max-width: 680px; color: var(--color-muted); font-size: clamp(14px, 1.15vw, 17px); }

@media (max-width: 760px) {
  .about-page { gap: 56px; padding-top: 8px; }
  .about-hero { gap: 30px; }
  .about-hero h1 { font-size: clamp(48px, 15vw, 76px); }
  .about-hero-copy { grid-template-columns: 1fr; gap: 20px; margin-left: 0; }
  .about-section { grid-template-columns: 1fr; gap: 24px; }
  .about-section h2 { position: static; margin: 0; }
  .about-section-copy { gap: 18px; }
  .about-pullquote { margin: 20px 0 !important; }
}

.empty-results p {
  margin: 0;
}

.load-sentinel {
  width: 100%;
  height: 1px;
}

.placeholder-page {
  display: grid;
  gap: var(--space-4);
  max-width: 620px;
}

.placeholder-page h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.04;
}

.placeholder-page p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.55;
}

.studio-flow {
  display: grid;
  gap: var(--space-6);
}

.studio-step {
  scroll-margin-top: 112px;
}

.style-step {
  display: block;
}

.step-copy {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.step-copy h1,
.step-copy h2,
.style-hero-copy h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0;
}

.step-copy h1 {
  font-size: clamp(36px, 5.6vw, 76px);
  line-height: 1;
}

.step-copy h2 {
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.08;
}

.style-notes h2 {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.56;
  letter-spacing: 0;
}

.step-copy p:not(.eyebrow),
.style-notes p {
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.58;
}

.studio-picker {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.studio-flow .styles-grid {
  columns: 5 180px;
  column-gap: var(--space-3);
  max-height: none;
  min-height: 0;
  overflow: visible;
  padding-right: 0;
}

.text-step,
.generation-step {
  display: block;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-hairline);
}

.text-step .composer {
  max-width: 760px;
}

.generation-step .preview-panel {
  min-height: min(720px, calc(100vh - 150px));
}

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

.style-page.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 780ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 780ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: min(calc(var(--item-index, 0) * 70ms), 240ms);
  will-change: opacity, transform;
}

.style-page.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.style-related-section {
  width: 100%;
}

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

.collection-hero {
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  min-height: min(660px, calc(100vh - 160px));
}

.collection-hero h1 {
  margin: 0;
  max-width: 760px;
  font-family: var(--font-serif);
  font-size: clamp(42px, 6.8vw, 96px);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: 0;
}

.collection-hero > div:first-child {
  display: grid;
  gap: var(--space-5);
}

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

.style-hero {
  display: grid;
  gap: var(--space-4);
  max-width: 1120px;
  min-height: auto;
}

.style-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.52fr) minmax(340px, 0.48fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.style-detail-copy {
  display: grid;
  gap: var(--space-5);
  max-width: 720px;
  min-width: 0;
}

.style-share-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 18px;
  font-size: 13px;
}

.style-share-action {
  appearance: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  padding: 0 0 2px;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.style-share-action:hover,
.style-share-action:focus-visible {
  color: var(--color-muted);
}

.style-share-status {
  min-height: 1em;
  color: var(--color-muted);
}

.style-preview-panel {
  position: sticky;
  top: 112px;
  display: grid;
  align-items: start;
  min-width: 0;
  border-left: 1px solid var(--color-hairline);
  padding-left: clamp(28px, 5vw, 72px);
}

.style-gallery {
  display: grid;
  gap: 12px;
  width: min(100%, 620px);
  outline: none;
}

.style-gallery:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 5px;
}

.style-gallery-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface-plain);
  padding: 0;
  box-shadow: var(--shadow-soft);
  cursor: zoom-in;
  touch-action: pan-y;
}

.style-gallery-stage .thumbnail-loader {
  height: 100%;
  border-radius: 0;
}

.style-gallery-stage .thumbnail-loader img,
.style-gallery-stage .thumbnail-loader video {
  padding: clamp(14px, 2.4vw, 32px);
}

.style-gallery-expand {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  border: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-paper) 88%, transparent);
  color: var(--color-ink);
  padding: 7px 11px;
  font-size: 12px;
  line-height: 1;
  backdrop-filter: blur(12px);
}

.style-gallery-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  color: var(--color-muted);
  font-size: 12px;
}

.style-gallery-controls button,
.style-gallery-close {
  border: 0;
  background: transparent;
  color: var(--color-ink);
  padding: 5px 0;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.style-gallery-controls [data-gallery-status] { text-align: center; }

.style-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.style-gallery-thumbs button {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xs);
  background: var(--color-surface-plain);
  padding: 0;
  opacity: .62;
  transition: opacity var(--motion-soft), border-color var(--motion-soft);
}

.style-gallery-thumbs button.active,
.style-gallery-thumbs button:hover,
.style-gallery-thumbs button:focus-visible {
  border-color: var(--color-ink);
  opacity: 1;
}

.style-gallery-thumbs .thumbnail-loader { border-radius: 0; }

.style-gallery-dialog {
  width: min(1200px, calc(100vw - 32px));
  max-width: none;
  height: min(850px, calc(100dvh - 32px));
  max-height: none;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  padding: clamp(18px, 3vw, 36px);
}

.style-gallery-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
}

.style-gallery-dialog::backdrop { background: rgba(12, 12, 12, .72); backdrop-filter: blur(8px); }
.style-gallery-dialog [data-gallery-dialog-media] { min-height:0; display:grid; place-items:center; }
.style-gallery-dialog img,.style-gallery-dialog video { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.style-gallery-dialog p { margin: 0; color: var(--color-muted); font-size: 12px; text-align: center; }
.style-gallery-close { justify-self: end; }

.style-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
}

.style-related-grid .specimen-card {
  display: block;
  width: 100%;
  margin: 0;
}

.style-hero-media {
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.style-hero-media img {
  width: 100%;
  max-height: none;
  border-radius: var(--radius-md);
  object-fit: contain;
}

.style-hero-copy {
  display: grid;
  gap: var(--space-2);
  max-width: 720px;
}

.style-hero-copy h1 {
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.02;
}

.style-notes {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(260px, 360px);
  gap: clamp(20px, 4vw, 56px);
  max-width: 1120px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-hairline);
}

.style-detail-copy .style-notes {
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: none;
}

.style-generator {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: start;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-hairline);
  scroll-margin-top: 112px;
}

.style-generator .composer {
  position: static;
}

.style-generator .preview-panel {
  min-height: 440px;
}

.studio {
  display: grid;
  grid-template-columns: minmax(360px, 470px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

.composer,
.preview-panel {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 84%, transparent);
  box-shadow: var(--shadow-soft);
}

.composer {
  display: grid;
  align-content: start;
  gap: var(--space-5);
  padding: var(--space-5);
}

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

label {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 4px;
}

.input-row input {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.input-row button {
  min-height: 35px;
  padding: 8px 13px;
  font-size: 12px;
}

input,
select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface-plain);
  color: var(--color-ink);
  padding: 0 13px;
  outline: none;
}

input::placeholder {
  color: color-mix(in srgb, var(--color-muted) 72%, transparent);
}

input:focus,
select:focus {
  border-color: var(--color-focus);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

button:disabled {
  cursor: default;
  opacity: 0.42;
}

.style-card:disabled {
  opacity: 1;
}

.style-head {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 190px);
  gap: var(--space-3);
  align-items: center;
}

.styles-grid {
  columns: 2 160px;
  column-gap: 10px;
  gap: 10px;
  max-height: calc(100vh - 250px);
  min-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.style-card {
  display: inline-grid;
  gap: 9px;
  align-content: start;
  width: 100%;
  margin: 0 0 10px;
  break-inside: avoid;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-surface-plain);
  color: var(--color-ink);
  padding: 8px;
  text-align: left;
}

.style-card:hover {
  border-color: rgba(25, 23, 19, 0.18);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.style-card[aria-selected="true"] {
  border-color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.style-card img,.style-card video {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-xs);
  background: var(--color-wash);
}

.style-card strong,
.style-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.style-card strong {
  color: var(--color-ink);
  font-size: 12px;
}

.style-card span {
  color: var(--color-muted);
  font-size: 11px;
}

.selected-style-panel {
  display: inline-grid;
  gap: 0;
  width: 100%;
  margin: 0 0 var(--space-4);
  break-inside: avoid;
  overflow: hidden;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.selected-style-panel .style-card {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.selected-style-panel .style-card[aria-selected="true"] {
  box-shadow: none;
}

.selected-style-panel .studio-inline-generator {
  margin: 0;
  border-top: 1px solid var(--color-hairline);
}

.studio-inline-generator {
  display: inline-grid;
  gap: var(--space-3);
  width: 100%;
  margin: 0 0 var(--space-4);
  break-inside: avoid;
}

.studio-inline-generator .composer,
.studio-inline-generator .preview-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.studio-inline-generator .composer {
  padding: var(--space-4);
}

.studio-inline-generator .preview-panel {
  border-top: 1px solid var(--color-hairline);
  grid-template-rows: minmax(180px, 28vh) auto;
  min-height: 0;
  padding: 8px;
}

.preview-panel {
  display: grid;
  grid-template-rows: minmax(520px, 1fr) auto;
  min-height: calc(100vh - 124px);
  padding: var(--space-4);
}

.preview-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px),
    var(--color-surface-plain);
  background-size: 32px 32px;
}

.preview-panel.has-generated-image {
  grid-template-rows: auto auto;
  min-height: 0;
  padding: 8px;
}

.preview-stage.has-generated-image {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

:root[data-theme="dark"] .preview-stage {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    var(--color-surface-plain);
}

:root[data-theme="dark"] .explore-inline-generator {
  border-top-color: color-mix(in srgb, var(--color-hairline) 72%, transparent);
}

:root[data-theme="dark"] .explore-inline-generator .composer,
:root[data-theme="dark"] .explore-inline-generator .preview-panel {
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
}

:root[data-theme="dark"] .explore-inline-generator input {
  background: color-mix(in srgb, var(--color-surface-plain) 92%, transparent);
}

.generated-preview-button {
  width: 100%;
  min-height: 0;
  padding: 0;
  color: inherit;
  cursor: zoom-in;
}

.generated-preview-button:disabled {
  cursor: default;
  opacity: 1;
}

canvas {
  width: 100%;
  height: auto;
}
.generated-result-image { display:block; width:100%; height:auto; object-fit:contain; -webkit-touch-callout:default; user-select:auto; }
.generated-result-image[hidden] { display:none; }

.empty-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  color: var(--color-muted);
  text-align: center;
}

.empty-state p {
  max-width: 320px;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.12;
}

.loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(251, 250, 247, 0.74);
  backdrop-filter: blur(4px);
}

.loader span {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(23, 22, 21, 0.14);
  border-top-color: var(--color-ink);
  border-radius: 50%;
  animation: spin 820ms linear infinite;
}

.preview-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: var(--space-4);
}

.preview-actions .download-icon {
  margin-left: 0;
}

.preview-actions-primary,
.preview-downloads {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
}

.preview-actions-primary { flex: 0 1 auto; }
.preview-downloads { flex: 0 0 auto; margin-left: auto; }
.preview-actions-primary > *,
.preview-downloads > * { flex-shrink: 0; }

.download-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--color-muted);
}

.download-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.preview-actions button {
  min-height: 31px;
  padding: 7px 9px;
  font-size: 10px;
  line-height: 1;
}

.preview-actions button:not(:disabled):hover,
.preview-actions button:not(:disabled):focus-visible {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-surface);
}

.preview-studio-action {
  min-height: 31px;
  border: 0;
  background: transparent;
  padding: 7px 0;
  color: var(--color-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-decoration: underline;
  text-decoration-color: var(--color-hairline-strong);
  text-underline-offset: 4px;
  white-space: nowrap;
}

.preview-studio-action:not(:disabled):hover,
.preview-studio-action:not(:disabled):focus-visible {
  border: 0;
  background: transparent;
  color: var(--color-ink);
  text-decoration-color: currentColor;
}

.preview-studio-action:disabled {
  opacity: .5;
}

.generation-copy { position:relative; display:inline-flex; align-items:center; }
.copy-menu { position:relative; }
.copy-menu summary { list-style:none; cursor:pointer; min-height:31px; display:inline-flex; align-items:center; gap:4px; border:1px solid var(--color-hairline); border-radius:8px; background:transparent; padding:7px 9px; color:var(--color-ink); font:inherit; font-size:10px; font-weight:700; line-height:1; white-space:nowrap; }
.copy-menu summary::-webkit-details-marker { display:none; }
.copy-menu summary:hover,.copy-menu summary:focus-visible,.copy-menu[open] summary { border-color:var(--color-ink); background:var(--color-ink); color:var(--color-surface); }
.copy-menu.is-disabled { opacity:.5; pointer-events:none; }
.copy-menu-options { position:absolute; z-index:25; left:0; bottom:calc(100% + 7px); width:max-content; min-width:154px; display:grid; gap:2px; border:1px solid var(--color-hairline); border-radius:10px; background:var(--color-paper); box-shadow:var(--shadow-soft); padding:6px; }
.copy-menu:not([open]) .copy-menu-options { display:none; }
.copy-menu-options button { width:100%; min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; border-radius:6px; background:transparent; padding:8px 10px; color:var(--color-ink); font-size:11px; text-align:left; }
.copy-menu-options button:hover,.copy-menu-options button:focus-visible { background:var(--color-wash); color:var(--color-ink); }
.copy-menu-options button.is-locked { color:var(--color-muted); }
.copy-feedback { position:absolute; left:0; top:calc(100% + 5px); width:max-content; max-width:220px; color:var(--color-muted); font-size:10px; line-height:1.35; }
.copy-feedback.is-error,.simple-preview-status.is-error { color:#9f1d1d; }

.lightbox-open {
  overflow: hidden;
}

body.vector-dialog-open {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-4);
  height: 100dvh;
  overflow: hidden;
  background: rgba(247, 243, 234, 0.94);
  padding: clamp(18px, 4vw, 48px);
  backdrop-filter: blur(18px);
}

.lightbox-close {
  position: fixed;
  top: clamp(16px, 3vw, 34px);
  right: clamp(16px, 3vw, 34px);
  z-index: 101;
  display: grid;
  place-items: center;
  width: clamp(56px, 7vw, 84px);
  height: clamp(56px, 7vw, 84px);
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 400;
  line-height: 1;
}

.lightbox-frame {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  padding: clamp(48px, 7vw, 96px) clamp(10px, 4vw, 64px) 0;
}

.lightbox-frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - clamp(150px, 18vw, 230px));
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}

.lightbox-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

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

@media (max-width: 1120px) {
  .hero-grid,
  .studio,
  .split-section,
  .explore-layout,
  .style-step,
  .text-step,
  .generation-step,
  .style-hero,
  .style-notes,
  .style-generator,
  .style-detail-layout,
  .collection-hero {
    grid-template-columns: 1fr;
  }

  .style-preview-panel {
    position: static;
    order: -1;
    border-left: 0;
    padding-left: 0;
  }

  .style-gallery {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
  }

  .style-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-grid {
    min-height: auto;
  }

  .hero-board {
    column-count: 3;
  }

  .browse-panel {
    position: static;
  }

  .preview-panel {
    grid-template-rows: minmax(420px, 58vh) auto;
    min-height: auto;
  }

  .preview-panel.has-generated-image {
    grid-template-rows: auto auto;
  }

  .text-step .composer {
    position: static;
  }

  .style-generator .composer {
    position: static;
  }

  .studio-flow .styles-grid {
    column-count: 3;
  }

  .collection-hero {
    min-height: auto;
  }

  .topbar {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--space-3);
    backdrop-filter: none;
  }

  .nav-left {
    width: 100%;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .menu-toggle {
    display: grid;
    place-content: center;
    gap: 8px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-ink);
    padding: 0;
  }

  .menu-toggle span {
    width: 28px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition:
      transform var(--motion-soft),
      opacity var(--motion-soft);
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(10px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-10px) rotate(-45deg);
  }

  .primary-nav {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100vw;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    background: color-mix(in srgb, var(--color-paper) 96%, transparent);
    backdrop-filter: blur(24px);
    padding: max(66px, env(safe-area-inset-top)) 24px max(18px, env(safe-area-inset-bottom));
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px) scale(0.985);
    transition:
      opacity var(--motion-soft),
      transform var(--motion-soft);
  }

  .primary-nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .mobile-nav-main {
    display: grid;
    align-content: start;
    gap: 0;
    flex: 0 0 auto;
  }

  .primary-nav .mobile-nav-main :is(button, a[data-category-link]),
  .mobile-nav-about {
    position: relative;
    width: 100%;
    border-radius: var(--radius-sm);
    padding: 4px 0;
    color: var(--color-ink);
    font-size: clamp(22px, 5.2dvh, 38px);
    font-weight: 720;
    line-height: 1.05;
    text-align: left;
    transition:
      color var(--motion-soft),
      padding-left var(--motion-soft),
      transform var(--motion-soft);
  }

  .primary-nav .mobile-nav-main :is(button, a[data-category-link])::after,
  .mobile-nav-about::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.22;
    transition: width var(--motion-soft);
  }

  .primary-nav .mobile-nav-main :is(button, a[data-category-link]):hover,
  .primary-nav .mobile-nav-main :is(button, a[data-category-link]):focus-visible,
  .mobile-nav-about:hover,
  .mobile-nav-about:focus-visible {
    padding-left: 10px;
    color: var(--color-ink);
    transform: translateX(2px);
  }

  .primary-nav .mobile-nav-main :is(button, a[data-category-link]):hover::after,
  .primary-nav .mobile-nav-main :is(button, a[data-category-link]):focus-visible::after,
  .mobile-nav-about:hover::after,
  .mobile-nav-about:focus-visible::after {
    width: min(88px, 28%);
  }

  .primary-nav .mobile-nav-main :is(button, a[data-category-link]).active,
  .mobile-nav-about.active {
    color: var(--color-muted);
  }

  .mobile-nav-close {
    position: absolute;
    top: 22px;
    right: 22px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 50%;
    padding: 0;
  }

  .mobile-nav-close::before,
  .mobile-nav-close::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 1px;
    border-radius: 999px;
    background: currentColor;
  }

  .mobile-nav-close::before {
    transform: rotate(45deg);
  }

  .mobile-nav-close::after {
    transform: rotate(-45deg);
  }

  .mobile-nav-about {
    display: block;
    width: 100%;
    padding: 4px 0;
    color: var(--color-ink);
    font-size: clamp(22px, 5.2dvh, 38px);
    font-weight: 720;
    line-height: 1.05;
  }

  .topbar-actions {
    display: none;
  }

  .mobile-nav-tools {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 12px;
    min-height: 104px;
  }

  .mobile-search-form {
    display: block;
  }

  .mobile-search-form input {
    min-height: 42px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    padding-left: 38px;
  }

  .mobile-user-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: auto;
    padding-top: 10px;
  }

  .mobile-user-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-ink);
    font-size: 13px;
    font-weight: 700;
  }

  .mobile-profile-button {
    flex: 0 0 auto;
    border:2px solid var(--color-ink);
    background:var(--color-ink);
    color:var(--color-paper);
  }

  .mobile-user-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .mobile-signout {
    min-height: 34px;
    border: 1px solid var(--color-hairline);
    border-radius: 999px;
    background: transparent;
    color: var(--color-muted);
    padding: 7px 11px;
    font: inherit;
    font-size: 12px;
  }

  .mobile-signout:hover,
  .mobile-signout:focus-visible {
    border-color: var(--color-muted);
    color: var(--color-ink);
  }

  .mobile-account-menu-status {
    position: absolute;
    right: 24px;
    bottom: max(2px, env(safe-area-inset-bottom));
    margin: 0;
    font-size: 11px;
  }

  .mobile-theme-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
  }

  .mobile-theme-options button {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    border-color: var(--color-hairline);
    border-radius: 999px;
    background: transparent;
    color: var(--color-muted);
    padding: 8px 11px;
    font-size: 12px;
  }

  .mobile-theme-options button.active,
  .mobile-theme-options button:hover {
    border-color: var(--color-ink);
    color: var(--color-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .style-page.reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) {
  .shell {
    width: min(100vw - 28px, 760px);
    padding-top: 18px;
  }

  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .specimen-grid,
  .recent-grid,
  .rail-grid,
  .explore-grid {
    column-count: 2;
  }

  .hero-board {
    column-count: 2;
  }

  .styles-grid,
  .studio-flow .styles-grid {
    column-count: 2;
    max-height: none;
  }

  .collection-hero-mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .shell {
    width: min(100vw - 24px, 520px);
  }

  .section {
    margin-top: var(--space-7);
  }

  .hero-copy {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .hero-copy h1 {
    font-size: clamp(28px, 10vw, 42px);
  }

  .specimen-grid,
  .recent-grid,
  .rail-grid,
  .hero-board,
  .explore-grid,
  .styles-grid,
  .studio-flow .styles-grid {
    column-count: 1;
  }

  .style-related-grid {
    grid-template-columns: 1fr;
  }

  .collection-grid {
    grid-template-columns: 1fr;
  }

  .composer {
    padding: var(--space-4);
  }

  .input-row,
  .style-head {
    grid-template-columns: 1fr;
  }

  .studio-flow {
    gap: var(--space-7);
  }

  .preview-panel {
    grid-template-rows: minmax(360px, 52vh) auto;
  }

  .preview-panel.has-generated-image {
    grid-template-rows: auto auto;
  }

  .collection-hero h1 {
    font-size: clamp(48px, 15vw, 76px);
  }

  .collection-hero-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .style-generator .preview-panel {
    min-height: 420px;
  }

  .style-generator .preview-panel.has-generated-image {
    min-height: 0;
  }
}

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

/* Responsive masonry columns. */
@media (max-width: 1200px) {
  .explore-grid { --masonry-columns: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .explore-grid { --masonry-columns: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .explore-grid { --masonry-columns: 1; grid-template-columns: minmax(0, 1fr); }
}

/* Quiet navigation states; no animated underline or shifting text. */
.nav-backdrop { display: none; }
.primary-nav .mobile-nav-main :is(button, a[data-category-link]) {
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.primary-nav .mobile-nav-main :is(button, a[data-category-link]):hover {
  background: color-mix(in srgb, var(--color-ink) 5%, transparent);
}
.primary-nav .mobile-nav-main :is(button, a[data-category-link]).active {
  background: color-mix(in srgb, var(--color-ink) 8%, transparent);
  color: var(--color-ink);
}
@media (max-width: 1120px) {
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 39;
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease-out, visibility 220ms;
  }
  .nav-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; }
  .primary-nav {
    inset: 0 0 0 auto;
    width: min(420px, 100vw);
    height: 100dvh;
    justify-content: flex-start;
    padding: max(66px, env(safe-area-inset-top)) 24px max(18px, env(safe-area-inset-bottom));
    gap: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-paper);
    border-left: 1px solid var(--color-hairline);
    box-shadow: -16px 0 60px rgba(0, 0, 0, 0.06);
    transform: translateX(100%);
    opacity: 1;
    visibility: hidden;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), visibility 260ms;
  }
  .primary-nav.open { transform: translateX(0); visibility: visible; }
  .mobile-nav-main { align-content: start; gap: 0; }
  .mobile-nav-main::before {
    content: "EXPLORE TYPE";
    padding: 0 12px 8px;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--color-muted);
  }
  .primary-nav .mobile-nav-main :is(button, a[data-category-link]) {
    padding: 5px 12px;
    border-radius: 12px;
    font-size: clamp(21px, 4.6dvh, 28px);
    font-weight: 450;
    letter-spacing: -0.035em;
    line-height: 1.15;
    transform: none;
  }
  .primary-nav .mobile-nav-main :is(button, a[data-category-link]):hover,
  .primary-nav .mobile-nav-main :is(button, a[data-category-link]):focus-visible {
    padding-left: 12px;
    transform: none;
  }
  .primary-nav .mobile-nav-main :is(button, a[data-category-link])::after,
  .mobile-nav-about::after { display: none; }
  .primary-nav .mobile-nav-main :is(button, a[data-category-link]).active::before {
    content: "";
    position: absolute;
    right: 16px;
    top: calc(50% - 3px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }
  .mobile-nav-tools { border-top: 1px solid var(--color-hairline); padding-top: 12px; }
  .mobile-nav-about, .mobile-nav-about:hover, .mobile-nav-about:focus-visible {
    padding: 8px 12px;
    transform: none;
    font-weight: 500;
    transition: background-color 160ms ease-out;
    border-radius: 10px;
  }
  .mobile-nav-studio,
  .mobile-nav-library,
  .mobile-nav-studio:hover,
  .mobile-nav-library:hover,
  .mobile-nav-studio:focus-visible,
  .mobile-nav-library:focus-visible {
    margin-top: 4px;
    border: 1px solid color-mix(in srgb, var(--color-ink) 24%, transparent);
    border-radius: 12px;
    padding: 4px 11px;
    font-size: clamp(21px, 4.6dvh, 28px);
    font-weight: 450;
    letter-spacing: -0.035em;
    line-height: 1.15;
  }
  .mobile-nav-about:hover { background: color-mix(in srgb, var(--color-ink) 5%, transparent); }
  .mobile-nav-close { background: color-mix(in srgb, var(--color-ink) 5%, transparent); }
  .mobile-nav-close:hover { background: color-mix(in srgb, var(--color-ink) 9%, transparent); }
  .primary-nav :is(button, a[data-category-link]):focus-visible, .mobile-nav-about:focus-visible {
    outline: 2px solid var(--color-muted);
    outline-offset: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .primary-nav, .nav-backdrop { transition: none; }
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(280px, 1.45fr) minmax(420px, 1fr);
  grid-template-areas:"intro nav" "updates nav" "bottom bottom";
  gap: clamp(48px, 8vw, 128px);
  margin-top: clamp(72px, 10vw, 152px);
  padding: clamp(40px, 6vw, 80px) 0 24px;
  border-top: 1px solid var(--color-hairline);
  color: var(--color-muted);
  font-size: 13px;
}

.footer-introduction { grid-area:intro; max-width: 620px; }
.footer-navigation { grid-area:nav; }
.footer-wordmark,
.footer-tagline,
.footer-description,
.footer-statement,
.footer-bottom-line { margin: 0; }
.footer-wordmark { color: var(--color-ink); font-size: clamp(27px, 3vw, 42px); font-weight: 650; letter-spacing: -.045em; }
.footer-tagline { margin-top: 2px; color: var(--color-ink); font-size: 15px; }
.footer-description { max-width: 430px; margin-top: 34px; line-height: 1.55; }
.footer-statement { max-width: 520px; margin-top: 18px; color: var(--color-ink-soft); font-size: clamp(16px, 1.4vw, 20px); line-height: 1.45; }

.footer-navigation { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 24px; }
.footer-link-group { display: flex; align-items: flex-start; flex-direction: column; gap: 10px; }
.footer-link-group h2 { margin: 0 0 8px; color: var(--color-ink); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.site-footer a, .generation-use-notice a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 180ms ease-out, text-decoration-color 180ms ease-out;
}
.site-footer a:hover, .generation-use-notice a:hover {
  color: var(--color-ink);
  text-decoration-color: currentColor;
}
.site-footer a:focus-visible, .generation-use-notice a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}
.footer-link-group a,
.footer-link-group .footer-link-button {
  min-height: 24px;
  line-height: 24px;
}
.footer-bottom-line {
  grid-area:bottom;
  grid-column: 1 / -1;
  padding-top: clamp(28px, 5vw, 56px);
  font-size: 11px;
}
.footer-newsletter{grid-area:updates;align-self:end;max-width:520px;padding-top:26px;color:var(--color-muted)}
.footer-newsletter h2{margin:0 0 8px;color:var(--color-ink);font-size:10px;font-weight:700;letter-spacing:.12em}
.footer-newsletter p{margin:0 0 12px;line-height:1.45}
.footer-newsletter-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.footer-newsletter-form input{box-sizing:border-box;min-width:0;min-height:44px;border:1px solid var(--color-hairline);border-radius:8px;background:var(--color-paper);color:var(--color-ink);padding:10px 12px;font:inherit;font-size:16px}
.footer-newsletter-form button{min-height:44px;border-radius:8px;padding-inline:18px}
.footer-newsletter-consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:8px;font-size:11px;line-height:1.45}.footer-newsletter-consent input{box-sizing:border-box;min-height:0;width:16px;height:16px;margin:0;padding:0;flex:0 0 auto}.footer-newsletter-honeypot{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.footer-newsletter-form input:focus-visible,.footer-newsletter-form button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.footer-newsletter-note{margin-top:8px!important;font-size:11px}
.footer-newsletter-status{min-height:18px;color:var(--color-ink)!important}

@media (max-width: 900px) {
  .site-footer { grid-template-columns: 1fr;grid-template-areas:"intro" "updates" "nav" "bottom"; gap: 52px; }
  .footer-introduction { max-width: 680px; }
  .footer-navigation { max-width: 680px; }
}

@media (max-width: 560px) {
  .site-footer { gap: 44px; padding-top: 36px; }
  .footer-description { margin-top: 28px; }
  .footer-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 24px; }
  .footer-link-group:last-child { grid-column: 1 / -1; }
  .footer-link-group a,
  .footer-link-group .footer-link-button { min-height: 30px; line-height: 30px; }
  .footer-newsletter-form{grid-template-columns:1fr}
}

.onboarding-page{min-height:100vh;display:grid;place-items:center;padding:32px;background:var(--color-paper);color:var(--color-ink)}
.onboarding-panel{width:min(100%,680px)}
.onboarding-panel>img{display:block;margin-bottom:42px}
.onboarding-panel h1{margin:10px 0 46px;font-size:clamp(48px,8vw,88px);font-weight:500;line-height:.92;letter-spacing:-.06em}
.onboarding-panel form{display:grid;gap:34px}
.onboarding-panel fieldset{display:grid;gap:16px;margin:0;padding:0;border:0}
.onboarding-panel legend{margin-bottom:14px;font-size:13px;font-weight:650;letter-spacing:.04em}
.onboarding-names{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.onboarding-names label{display:grid;gap:7px;font-size:12px;font-weight:650}
.onboarding-names label span{color:var(--color-muted);font-weight:400}
.onboarding-names input{box-sizing:border-box;width:100%;min-height:52px;border:1px solid var(--color-hairline);border-radius:9px;background:var(--color-paper);color:var(--color-ink);padding:12px 14px;font:inherit;font-size:16px}
.onboarding-panel form>button{justify-self:start;min-height:52px;border-radius:9px;padding-inline:24px}
.onboarding-status{min-height:20px;margin:0;color:var(--color-muted);font-size:13px}
@media(max-width:560px){.onboarding-page{place-items:start;padding:24px 20px}.onboarding-panel>img{margin-bottom:34px}.onboarding-names{grid-template-columns:1fr}.onboarding-panel h1{margin-bottom:36px}}
.use-notice-page {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 80px) 0;
  line-height: 1.75;
  color: var(--color-ink-soft);
}
.use-notice-page h1 {
  margin: 12px 0 24px;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: var(--color-ink);
}
.use-notice-page .notice-intro { font-size: 18px; }
.use-notice-page section { margin-top: 40px; }
.use-notice-page h2 {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 500;
  color: var(--color-ink);
}
.use-notice-page p { margin: 0 0 16px; }
.generation-use-notice {
  margin: 10px 0 0;
  color: var(--color-muted);
  font-size: 11px;
  line-height: 1.6;
}
.generation-use-notice a { text-decoration-color: var(--color-hairline); }
.notice-link-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.profile-library-link { display:flex; justify-content:space-between; width:100%; padding:12px 0 18px; margin-bottom:14px; border:0; border-bottom:1px solid var(--color-hairline); border-radius:0; background:transparent; color:var(--color-ink); font:inherit; text-align:left; text-decoration:none; }
.library-page { padding:0 0 16px; }
.library-heading { margin-bottom:24px; }
.library-page h1 { font-size:clamp(38px,5vw,64px); font-weight:500; letter-spacing:-.055em; margin:6px 0 0; line-height:1.05; }
.library-page p { color:var(--color-muted); line-height:1.65; }
.library-heading .eyebrow { margin:0; }
.library-heading-tools { display:flex; justify-content:flex-end; align-items:center; gap:18px; margin:16px 0; }
.membership-summary { min-width:0; }
.membership-compact { display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px 40px; }
.membership-compact-copy { flex:1 1 420px; min-width:0; }
.membership-summary .membership-primary { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 7px; margin:0; color:var(--color-ink); font-size:18px; line-height:1.4; }
.membership-primary span::before { content:"· "; }
.membership-primary strong { font-size:20px; font-weight:650; }
.membership-summary .membership-balances,.membership-summary .membership-timing { margin:3px 0 0; font-size:13px; line-height:1.5; }
.membership-timing span { display:inline-block; max-width:100%; }
.membership-purchase { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.membership-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.membership-actions .secondary-button { min-height:40px; padding:10px 16px; white-space:nowrap; }
.membership-summary .credit-pack-offer { margin:0; color:var(--color-muted); font-size:11px; line-height:1.5; }
.membership-details { margin-top:7px; font-size:12px; }
.membership-details summary { width:fit-content; color:var(--color-muted); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.membership-details dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; margin:12px 0 0; border-top:1px solid var(--color-hairline); padding-top:12px; }
.membership-details dl div { display:flex; justify-content:space-between; gap:12px; }
.membership-details dt { color:var(--color-muted); }
.membership-details dd { margin:0; text-align:right; }
.membership-pending,.membership-status { flex-basis:100%; margin:0; font-size:12px; }
.membership-status:empty,.library-status:empty { display:none; }
.library-filter-toggle { flex:0 0 auto; margin:0; padding:3px 0; border:0; border-radius:0; background:transparent; color:var(--color-ink); font:inherit; font-size:13px; text-decoration:underline; text-underline-offset:4px; white-space:nowrap; }
.library-inline-search { display:flex; align-items:center; gap:9px; margin:0; color:var(--color-muted); font-size:12px; }
.library-inline-search input { width:min(22vw,230px); min-width:150px; border:0; border-bottom:1px solid var(--color-hairline); border-radius:0; background:transparent; padding:7px 2px; color:var(--color-ink); font:inherit; }
.library-inline-search input:focus { outline:0; border-bottom-color:var(--color-ink); }
.library-controls { margin:14px 0 24px; border:1px solid var(--color-hairline); border-radius:16px; background:color-mix(in srgb,var(--color-paper) 94%,var(--color-wash)); padding:24px; }
.library-controls[hidden] { display:none; }
.library-controls-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.library-controls-heading .eyebrow { margin:0 0 7px; }
.library-controls-heading h2 { margin:0; font-size:clamp(22px,3vw,30px); font-weight:500; letter-spacing:-.035em; }
.library-controls-heading > span { color:var(--color-muted); font-size:13px; line-height:1.5; white-space:nowrap; }
.library-filters { display:grid; grid-template-columns:repeat(4,minmax(140px,1fr)); gap:14px; align-items:end; }
.library-filters label { display:grid; gap:7px; margin:0; color:var(--color-muted); font-size:12px; font-weight:500; text-transform:none; }
.library-filters input,.library-filters select { box-sizing:border-box; width:100%; min-width:0; min-height:44px; margin:0; border:1px solid var(--color-hairline); border-radius:8px; background:var(--color-paper); color:var(--color-ink); padding:10px 12px; font:inherit; }
.library-filters input:focus,.library-filters select:focus { outline:2px solid var(--color-ink); outline-offset:2px; }
.library-filters .library-favourite-filter { grid-column:1 / -1; display:flex; align-items:center; justify-self:start; gap:9px; min-height:30px; cursor:pointer; }
.library-favourite-filter input { width:18px; min-height:18px; height:18px; margin:0; accent-color:var(--color-ink); }
.library-controls-footer { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:14px; border-top:1px solid var(--color-hairline); padding-top:14px; color:var(--color-muted); font-size:12px; }
.library-clear { border:0; background:transparent; color:var(--color-ink); padding:4px 0; font:inherit; text-decoration:underline; text-underline-offset:4px; white-space:nowrap; }
.library-status { min-height:22px; margin:0 0 10px; font-size:13px; }
.specimen-card,
.explore-card,
.style-card,
.selected-style-panel,
.collection-mosaic a,
.collection-hero-mosaic a {
  border: 1px solid var(--style-keyline);
  border-radius: var(--style-panel-radius);
  box-shadow: var(--style-frame);
}

/* Keep the white inset visible when a style panel is raised or selected. */
.specimen-card:hover {
  box-shadow: var(--style-frame), var(--shadow-lift);
}

.explore-card:hover,
.explore-card.active,
.style-card:hover,
.selected-style-panel {
  box-shadow: var(--style-frame), var(--shadow-soft);
}

.specimen-card {
  padding: 2px;
}

.collection-mosaic a,
.collection-hero-mosaic a {
  padding: 2px;
  background: var(--style-frame-color);
}

.specimen-card img,.specimen-card video,
.hero-board .specimen-card img,.hero-board .specimen-card video,
.explore-card img,.explore-card video,
.style-card img,.style-card video,
.collection-mosaic img,.collection-mosaic video,
.collection-hero-mosaic img,.collection-hero-mosaic video {
  border-radius: var(--style-thumbnail-radius);
}

.library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:start; }
.library-card { min-width:0; margin:0; border:1px solid var(--color-hairline); border-radius:16px; overflow:hidden; background:var(--color-paper); }
.library-image { position:relative; display:block; width:100%; aspect-ratio:3/2; overflow:hidden; padding:0; border:0; border-radius:0; cursor:zoom-in; background:var(--color-wash); }
.library-image:focus-visible { outline:2px solid var(--color-focus); outline-offset:-4px; }
.library-image::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,#f7f7f5 8%,#e8e8e5 28%,#f7f7f5 48%); background-size:220% 100%; animation:library-sheen 1.35s ease-in-out infinite; opacity:0; transition:opacity 220ms ease; }
.library-image.is-loading::before { opacity:1; }
.library-image img { display:block; width:100%; height:100%; object-fit:contain; opacity:1; transition:opacity 280ms ease; -webkit-touch-callout:default; user-select:auto; }
.library-image.is-loading img { opacity:0; }
.library-card-copy { padding:14px 16px 16px; }
.library-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.library-card-head > div { min-width:0; }
.library-card h2 { margin:0 0 6px; font-size:18px; font-weight:500; overflow-wrap:anywhere; }
.library-svg-marker { position:absolute; z-index:2; top:10px; left:10px; border:1px solid var(--color-ink); border-radius:999px; background:var(--color-paper); color:var(--color-ink); padding:4px 7px; font-size:9px; font-weight:700; letter-spacing:.08em; }
.library-svg-card .library-image { background-color:#fff; background-image:conic-gradient(#eee 25%,transparent 0 50%,#eee 0 75%,transparent 0); background-size:18px 18px; }
.library-card-copy p { margin:0; font-size:12px; }
.library-favourite { flex:0 0 36px; width:36px; height:36px; min-width:36px; min-height:36px; display:grid; place-items:center; border:1px solid var(--color-hairline); border-radius:50%; background:transparent; color:var(--color-ink); padding:0; font-size:19px; line-height:1; }
.library-favourite[aria-pressed=true] { background:var(--color-ink); color:var(--color-paper); }
.library-rating-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0; border-block:1px solid var(--color-hairline); padding:10px 0; color:var(--color-muted); font-size:11px; }
.library-rating { display:flex; gap:1px; }
.library-rating button { padding:2px 3px; font-size:19px; color:var(--color-muted); opacity:.35; border:0; background:transparent; transition:color 150ms,transform 150ms; }
.library-rating button.rated { color:var(--color-ink); opacity:1; }
.library-rating button:hover { opacity:1; transform:translateY(-2px); }
.library-card-actions { display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:10px; }
.library-card-actions a,.library-card-actions button:not(.preview-studio-action) { min-height:31px; display:inline-flex; align-items:center; border:1px solid var(--color-hairline); border-radius:8px; background:transparent; color:var(--color-ink); padding:7px 9px; font:inherit; font-size:10px; font-weight:700; line-height:1; text-decoration:none; white-space:nowrap; }
.library-card-actions a:hover,.library-card-actions a:focus-visible,.library-card-actions button:not(.preview-studio-action):not(:disabled):hover,.library-card-actions button:not(.preview-studio-action):not(:disabled):focus-visible { border-color:var(--color-ink); background:var(--color-ink); color:var(--color-surface); }
.library-card-actions-primary { margin:12px 0 6px; flex-wrap:nowrap; }
.library-card-actions.preview-actions { padding-top:0; gap:8px; }
.library-card-actions.preview-actions .preview-downloads { margin-left:auto; }
.library-download-icon { display:inline-grid; place-items:center; width:20px; color:var(--color-muted); font-size:17px; }
.library-manage-menu { position:relative; margin-left:auto; }
.library-manage-menu summary { display:grid; min-width:31px; min-height:31px; place-items:center; border:1px solid var(--color-hairline); border-radius:8px; cursor:pointer; list-style:none; font-size:13px; letter-spacing:.08em; }
.library-manage-menu summary::-webkit-details-marker { display:none; }
.library-manage-menu > div { position:absolute; z-index:12; right:0; top:calc(100% + 5px); display:grid; min-width:126px; gap:2px; border:1px solid var(--color-hairline); border-radius:9px; background:var(--color-paper); padding:5px; box-shadow:var(--shadow-soft); }
.library-card-actions .library-manage-menu button { width:100%; justify-content:flex-start; border:0; }
.library-card-actions-secondary { justify-content:flex-start; gap:12px; }
.library-card-actions-secondary button { border:0; padding:5px 0; color:var(--color-muted); }
.library-card-actions-secondary .library-delete { color:var(--color-muted); }
.library-card-actions .copy-menu-options button { min-height:34px; border:0; border-radius:6px; padding:8px 10px; }
.library-card-actions .copy-menu-options button:first-child { background:transparent; color:var(--color-ink); }
.library-card-actions .copy-menu-options button:hover,.library-card-actions .copy-menu-options button:focus-visible { background:var(--color-wash); color:var(--color-ink); }
.library-enquire { display:flex; width:100%; justify-content:space-between; margin:10px 0 0; padding:9px 0 0; border:0; border-top:1px solid var(--color-hairline); border-radius:0; background:none; color:var(--color-muted); font-size:10px; text-align:left; }
.library-service { margin-top:48px; padding:32px; border:1px solid var(--color-hairline); border-radius:16px; max-width:780px; }
.library-service h2 { font-size:30px; font-weight:500; margin:12px 0; letter-spacing:-.035em; }
.library-service a, .library-empty a, .library-dialog a { color:var(--color-ink); text-decoration:underline; text-underline-offset:4px; }
.library-empty { grid-column:1 / -1; padding:64px 24px; text-align:center; border:1px dashed var(--color-hairline); border-radius:16px; }
.library-auth { max-width:460px; margin:48px auto 100px; }
.library-auth label { display:block; margin:20px 0; }
.library-auth input { display:block; width:100%; margin-top:8px; padding:14px; border:1px solid var(--color-hairline); border-radius:8px; background:var(--color-surface); color:var(--color-ink); }
.account-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.account-help { font-size:12px; }
.library-dialog { border:1px solid var(--color-hairline); border-radius:20px; background:var(--color-paper); color:var(--color-ink); padding:0; width:min(560px,calc(100vw - 32px)); max-height:90dvh; overflow:auto; }
.dialog-open { overflow:hidden; }
.library-dialog::backdrop { background:rgba(0,0,0,.6); backdrop-filter:blur(5px); }
.library-dialog-close { position:sticky; top:12px; z-index:20; display:grid; place-items:center; flex:0 0 36px; margin:12px 12px 0 auto; border:0; border-radius:50%; width:36px; height:36px; min-width:36px; min-height:36px; padding:0; font-size:26px; line-height:1; background:var(--color-wash); color:var(--color-ink); }
.library-dialog-close span { display:block; width:1em; height:1em; line-height:.86; text-align:center; transform:translateY(-.02em); }
.library-dialog-copy { padding:16px 32px 32px; line-height:1.65; }
.library-dialog-copy h2 { font-weight:500; letter-spacing:-.03em; }
.library-image-dialog { width:min(1200px,calc(100vw - 32px)); }
.library-large-image { display:block; width:100%; max-height:70dvh; object-fit:contain; margin-top:12px; }
.library-contact { display:inline-block; margin:12px 0; }
@keyframes library-sheen { from { background-position:100% 0; } to { background-position:-100% 0; } }
@media(max-width:1120px) { .library-filters { grid-template-columns:2fr 1fr 1fr; } .library-filters .library-favourite-filter { grid-column:auto; } }
@media(max-width:1000px) { .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .library-filters { grid-template-columns:1fr 1fr; } .library-search-filter { grid-column:1 / -1; } .library-controls-heading { align-items:flex-start; } }
@media(max-width:800px) { .membership-purchase { align-items:flex-start; } .membership-details dl { grid-template-columns:1fr; } }
@media(max-width:640px) { .library-heading { margin-bottom:20px; } .library-grid { grid-template-columns:1fr; } .library-service { padding:24px; } .membership-primary span { flex-basis:100%; } .membership-primary span::before { content:none; } .membership-actions .secondary-button { padding-inline:12px; font-size:12px; } .library-heading-tools { justify-content:space-between; gap:16px; } .library-inline-search { flex:1; min-width:0; } .library-inline-search input { width:100%; min-width:0; } .library-controls { padding:18px; } }

@media(max-width:420px) { .library-card-actions-primary { flex-wrap:wrap; } .library-manage-menu { margin-left:0; } }
@media(max-width:480px) { .library-filters { grid-template-columns:1fr; } .library-search-filter { grid-column:auto; } .library-controls-heading,.library-controls-footer { align-items:flex-start; flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { .library-rating button,.library-image img { transition:none; } .library-image::before { animation:none; } }
.google-sign-in { display:flex; justify-content:space-between; align-items:center; width:100%; margin:28px 0 20px; padding:16px 20px; background:var(--color-ink); color:var(--color-paper); border:0; border-radius:10px; font:inherit; }
.google-sign-in:disabled { opacity:.45; cursor:not-allowed; }
.vector-dialog { width:min(1240px,calc(100vw - 24px)); }
.vector-content { padding:0 28px 28px; }
.vector-heading { margin:-22px 54px 20px 0; }
.vector-content h2 { margin:4px 0 0; font-size:clamp(20px,3vw,28px); font-weight:500; letter-spacing:-.03em; }
.vector-workspace { display:grid; gap:18px; align-items:start; }
.vector-toolbox { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(240px,.7fr); gap:10px; }
.vector-tool-group { border:1px solid var(--color-hairline); border-radius:12px; overflow:hidden; background:var(--color-paper); }
.vector-tool-group summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; cursor:pointer; font-size:13px; font-weight:700; list-style:none; }
.vector-tool-group summary::-webkit-details-marker { display:none; }
.vector-tool-group summary::after { content:"+"; color:var(--color-muted); font-size:18px; font-weight:400; }
.vector-tool-group[open] summary::after { content:"−"; }
.vector-preview { min-width:0; }
.vector-preview-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.vector-compare { display:flex; flex-wrap:wrap; gap:5px; }
.vector-compare button { min-height:34px; background:transparent; color:var(--color-muted); border:1px solid var(--color-hairline); border-radius:20px; padding:5px 10px; }
.vector-compare button[aria-pressed=true] { background:var(--color-ink); color:var(--color-paper); }
.vector-preview-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.vector-copy-menu { position:relative; }
.vector-copy-menu summary { min-height:34px; display:flex; align-items:center; border:1px solid var(--color-hairline); border-radius:20px; padding:5px 10px; color:var(--color-ink); font-size:11px; font-weight:700; cursor:pointer; list-style:none; }
.vector-copy-menu summary::-webkit-details-marker { display:none; }
.vector-copy-menu > div { position:absolute; top:calc(100% + 6px); right:0; z-index:8; display:grid; gap:4px; min-width:132px; border:1px solid var(--color-hairline); border-radius:9px; background:var(--color-paper); padding:6px; box-shadow:var(--shadow-lift); }
.vector-copy-menu button { min-height:34px; border:0; border-radius:6px; background:transparent; color:var(--color-ink); padding:7px 9px; text-align:left; }
.vector-copy-menu button:hover,.vector-copy-menu button:focus-visible { background:var(--color-wash); }
.vector-stage { width:100%; height:auto; aspect-ratio:16/9; max-height:620px; display:grid; place-items:center; border:1px solid var(--color-hairline); border-radius:12px; background-color:#fff; background-image:conic-gradient(#eee 25%,transparent 0 50%,#eee 0 75%,transparent 0); background-size:20px 20px; }
.vector-stage img { width:100%; height:100%; object-fit:contain; min-height:0; }
.vector-stage[aria-busy=true] { opacity:.55; }
.vector-bottom { display:grid; gap:9px; padding:0 16px 16px; }
.vector-bottom button { width:100%; }
.vector-bottom span { font-size:12px; color:var(--color-muted); max-width:420px; }
.vector-content [role=status] { font-size:13px; min-height:20px; }
.vector-adjustments { display:grid; gap:14px; padding:0 16px 16px; }
.vector-adjustments label { font-size:12px; color:var(--color-ink-soft); text-transform:none; letter-spacing:0; }
.vector-adjustments select { display:block; width:100%; margin-top:10px; background:var(--color-paper); color:var(--color-ink); border:1px solid var(--color-hairline); border-radius:6px; padding:8px; }
.vector-adjustments input[type=range] { display:block; width:100%; margin:14px 0 0; accent-color:var(--color-ink); padding:0; }
.vector-adjustments output { float:right; color:var(--color-muted); }
.vector-adjustments p { margin:0; font-size:12px; line-height:1.55; color:var(--color-muted); }
.vector-colours { display:grid; grid-template-columns:minmax(160px,.55fr) minmax(280px,1fr); gap:16px; padding:0 16px 16px; }
.vector-colour-treatment { display:grid; align-content:start; gap:10px; min-width:0; margin:0; padding:0; border:0; color:var(--color-ink-soft); font-size:12px; }
.vector-colour-treatment legend,.vector-gradient-settings > span { width:100%; margin:0 0 2px; color:var(--color-ink); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.vector-colours select { display:block; width:100%; margin:0; border:1px solid var(--color-hairline); border-radius:6px; background:var(--color-paper); color:var(--color-ink); padding:8px; }
.vector-gradient-settings { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:4px; }
.vector-gradient-settings > span { grid-column:1 / -1; }
.vector-gradient-stops { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--color-hairline); border-radius:7px; overflow:hidden; }
.vector-gradient-stops button { min-width:36px; min-height:34px; border:0; border-radius:0; background:transparent; color:var(--color-muted); padding:5px 9px; }
.vector-gradient-stops button + button { border-left:1px solid var(--color-hairline); }
.vector-gradient-stops button[aria-pressed=true] { background:var(--color-ink); color:var(--color-paper); }
.vector-live-colour { min-width:0; --picker-hue:0; --picker-rgb:0,0,0; }
.vector-colour-targets { display:grid; grid-template-columns:1fr 1fr; margin-bottom:10px; border:1px solid var(--color-hairline); border-radius:999px; overflow:hidden; }
.vector-colour-targets button { min-height:34px; border:0; border-radius:0; background:transparent; color:var(--color-muted); padding:5px 12px; font-size:11px; letter-spacing:.06em; }
.vector-colour-targets button + button { border-left:1px solid var(--color-hairline); }
.vector-colour-targets button[aria-pressed=true] { background:var(--color-ink); color:var(--color-paper); }
.vector-colour-targets button:disabled { opacity:.35; cursor:not-allowed; }
.vector-colour-field { position:relative; height:clamp(132px,16vw,190px); overflow:hidden; border-radius:10px; background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--picker-hue) 100% 50%)); cursor:crosshair; touch-action:none; }
.vector-colour-field:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }
.vector-colour-field [data-colour-field-handle] { position:absolute; width:24px; height:24px; border:3px solid #fff; border-radius:50%; box-shadow:0 1px 5px rgba(0,0,0,.55); transform:translate(-50%,-50%); pointer-events:none; }
.vector-colour-hue,.vector-colour-opacity input { display:block; width:100%; height:20px; margin:10px 0 0; padding:0; border:0; border-radius:999px; background:transparent; appearance:none; -webkit-appearance:none; cursor:pointer; touch-action:none; }
.vector-colour-hue { background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.vector-colour-opacity { position:relative; height:20px; margin-top:10px; overflow:hidden; border-radius:999px; background-color:#fff; background-image:linear-gradient(45deg,#c8cbca 25%,transparent 25%),linear-gradient(-45deg,#c8cbca 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#c8cbca 75%),linear-gradient(-45deg,transparent 75%,#c8cbca 75%); background-position:0 0,0 5px,5px -5px,-5px 0; background-size:10px 10px; }
.vector-colour-opacity::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(var(--picker-rgb),0),rgb(var(--picker-rgb))); pointer-events:none; }
.vector-colour-opacity input { position:absolute; inset:0; z-index:1; height:20px; margin:0; }
.vector-colour-hue::-webkit-slider-runnable-track,.vector-colour-opacity input::-webkit-slider-runnable-track { height:20px; background:transparent; }
.vector-colour-hue::-moz-range-track,.vector-colour-opacity input::-moz-range-track { height:20px; background:transparent; }
.vector-colour-hue::-webkit-slider-thumb,.vector-colour-opacity input::-webkit-slider-thumb { width:24px; height:24px; margin-top:-2px; border:3px solid #fff; border-radius:50%; background:transparent; box-shadow:0 1px 5px rgba(0,0,0,.55); appearance:none; -webkit-appearance:none; }
.vector-colour-hue::-moz-range-thumb,.vector-colour-opacity input::-moz-range-thumb { width:18px; height:18px; border:3px solid #fff; border-radius:50%; background:transparent; box-shadow:0 1px 5px rgba(0,0,0,.55); }
.vector-colour-value { display:grid; grid-template-columns:34px 1fr; align-items:end; gap:10px; margin-top:11px; }
.vector-colour-swatch { position:relative; width:34px; height:34px; overflow:hidden; border:1px solid var(--color-hairline); border-radius:50%; background-color:#fff; background-image:linear-gradient(45deg,#c8cbca 25%,transparent 25%),linear-gradient(-45deg,#c8cbca 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#c8cbca 75%),linear-gradient(-45deg,transparent 75%,#c8cbca 75%); background-position:0 0,0 5px,5px -5px,-5px 0; background-size:10px 10px; }
.vector-colour-swatch > span { position:absolute; inset:0; }
.vector-colour-value label { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px; color:var(--color-ink); font-size:11px; font-weight:700; letter-spacing:.08em; }
.vector-colour-value input { width:100%; min-width:0; height:34px; border:1px solid var(--color-hairline); border-radius:7px; background:var(--color-paper); color:var(--color-ink); padding:6px 9px; font:inherit; font-variant-numeric:tabular-nums; letter-spacing:.02em; text-transform:uppercase; }
.vector-colour-value input[aria-invalid=true] { border-color:#a5312d; }
.vector-invert-group { display:flex; align-items:center; min-height:52px; border:1px solid var(--color-hairline); border-radius:12px; background:var(--color-paper); padding:12px 16px; }
.vector-invert-group .vector-invert { display:flex; align-items:center; gap:9px; color:var(--color-ink); font-size:12px; }
.vector-invert-group input { width:18px; height:18px; margin:0; accent-color:var(--color-ink); }
.vector-colour-group { grid-column:1; grid-row:1; }
.vector-toolbox > .vector-tool-group:last-child { grid-column:2; grid-row:1; }
.vector-invert-group { grid-column:1 / -1; grid-row:2; }
.vector-colour-group[hidden] + .vector-invert-group { grid-column:1; grid-row:1; }
.vector-colour-group[hidden] + .vector-invert-group[hidden] + .vector-tool-group { grid-column:1 / -1; }
.vector-stage.white-artwork { background-color:#343434; background-image:conic-gradient(#414141 25%,transparent 0 50%,#414141 0 75%,transparent 0); }
.vector-refined { margin-top:28px; padding-top:24px; border-top:1px solid var(--color-hairline); }
.vector-refined h3 { margin:8px 0; font-weight:500; font-size:22px; letter-spacing:-.025em; }
.vector-refined p { max-width:740px; font-size:14px; line-height:1.6; }
.vector-refined a { display:inline-block; margin:8px 0; padding:11px 16px; border-radius:999px; background:var(--color-ink); color:var(--color-paper); text-decoration:none; }
.vector-refined .vector-refined-note { font-size:12px; color:var(--color-muted); }
.vector-refined [data-refined-request], .generation-refinement-action button { display:inline-block; margin:8px 0; padding:11px 16px; border:0; border-radius:999px; background:var(--color-ink); color:var(--color-paper); font:inherit; cursor:pointer; }
.vector-refined [data-refined-request]:disabled, .generation-refinement-action button:disabled { opacity:.45; cursor:not-allowed; }

.generation-refinement-action { padding-top:14px; border-top:1px solid var(--color-hairline); }
.refinement-request { width:100%; margin-top:22px; padding:clamp(22px,4vw,42px); border:1px solid var(--color-hairline); border-radius:24px; background:var(--color-paper); color:var(--color-ink); box-sizing:border-box; }
.library-grid > .refinement-request { grid-column:1/-1; margin:0; }
.simple-image-preview > .refinement-request { margin:24px; width:calc(100% - 48px); text-align:left; }
.refinement-intro { max-width:780px; margin-bottom:30px; }
.refinement-intro h2,.refinement-success h2 { margin:6px 0 14px; font-size:clamp(26px,4vw,42px); font-weight:500; letter-spacing:-.035em; }
.refinement-intro p,.refinement-success p { max-width:720px; line-height:1.55; }
.refinement-note { color:var(--color-muted); font-size:13px; }
.refinement-layout { display:grid; grid-template-columns:minmax(190px,320px) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:start; }
.refinement-artwork { position:sticky; top:24px; margin:0; }
.refinement-artwork img { display:block; width:100%; max-height:420px; object-fit:contain; border-radius:16px; background:#f2f0eb; }
.refinement-artwork figcaption { display:flex; flex-direction:column; gap:3px; padding-top:12px; }
.refinement-artwork figcaption span { color:var(--color-muted); font-size:13px; }
.refinement-form { min-width:0; }
.refinement-form fieldset { margin:0 0 28px; padding:0 0 28px; border:0; border-bottom:1px solid var(--color-hairline); }
.refinement-form legend { width:100%; margin:0 0 16px; padding:0; font-size:18px; font-weight:600; }
.refinement-form label { display:grid; gap:7px; margin-top:14px; font-size:13px; }
.refinement-form label > span { color:var(--color-muted); }
.refinement-form input[type=text],.refinement-form input[type=email],.refinement-form input[type=date],.refinement-form input:not([type]),.refinement-form textarea { width:100%; padding:12px 13px; border:1px solid var(--color-hairline); border-radius:10px; background:var(--color-paper); color:var(--color-ink); font:inherit; box-sizing:border-box; }
.refinement-fields.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.refinement-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.refinement-choice { display:flex!important; align-items:center; justify-content:flex-start; gap:12px!important; min-height:48px; height:100%; margin:0!important; padding:10px 16px; border:1px solid var(--color-hairline); border-radius:10px; box-sizing:border-box; text-align:left; cursor:pointer; }
.refinement-choice input { flex:0 0 18px; width:18px; height:18px; min-width:18px; min-height:18px; margin:0; accent-color:var(--color-ink); }
.refinement-choice span { flex:1 1 auto; min-width:0; color:inherit!important; line-height:1.35; }
.refinement-summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; }
.refinement-summary div { padding:12px; border-radius:10px; background:var(--color-wash); }
.refinement-summary dt { color:var(--color-muted); font-size:12px; }
.refinement-summary dd { margin:4px 0 0; }
.refinement-pricing { margin:0 0 20px; padding:18px; border-radius:14px; background:var(--color-wash); }
.refinement-pricing p { margin:8px 0 0; line-height:1.5; }
.refinement-form .refinement-label { color:inherit; }
.refinement-required { margin-left:4px; color:#d63832; font-size:.75em; font-weight:500; vertical-align:super; line-height:0; }
.refinement-form .refinement-required-note { margin:0 0 18px; color:var(--color-muted); font-size:12px; }
.refinement-required-note .refinement-required { margin-left:0; }
.refinement-privacy { display:flex!important; align-items:flex-start; gap:11px!important; min-height:44px; padding:0; cursor:pointer; }
.refinement-privacy input[type=checkbox] { flex:0 0 17px; width:17px; height:17px; min-width:17px; min-height:17px; margin:1px 0 0; padding:0; box-sizing:border-box; accent-color:var(--color-ink); }
.refinement-privacy a { text-decoration:underline; text-underline-offset:3px; }
.refinement-privacy span { color:var(--color-muted)!important; line-height:1.45; }
.refinement-submit { display:flex; align-items:center; gap:16px; margin-top:20px; }
.refinement-submit button { padding:13px 20px; border:0; border-radius:999px; background:var(--color-ink); color:var(--color-paper); font:inherit; cursor:pointer; }
.refinement-submit p { margin:0; color:var(--color-muted); }
.refinement-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; }
.refinement-success { padding:20px 0; }
@media (max-width:720px){.refinement-layout,.refinement-fields.two,.refinement-choices,.refinement-summary{grid-template-columns:1fr}.refinement-artwork{position:static}.simple-image-preview > .refinement-request{margin:16px;width:calc(100% - 32px)}.refinement-submit{align-items:flex-start;flex-direction:column}.refinement-request{padding:22px 16px;border-radius:18px}}
.vector-stage { overflow:hidden; position:relative; touch-action:none; }
.vector-stage img { transform-origin:center; pointer-events:none; user-select:none; }
.vector-stage.is-zoomed { cursor:grab; }
.vector-stage.is-panning { cursor:grabbing; }
.vector-stage:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }
.vector-zoom-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.vector-zoom-controls button { background:var(--color-paper); color:var(--color-ink); border:1px solid var(--color-hairline); border-radius:8px; padding:8px 12px; min-width:40px; }
.vector-zoom-controls [data-zoom-level] { min-width:48px; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
.vector-zoom-hint { margin:8px 0 0; color:var(--color-muted); font-size:12px; }
@media(max-width:820px) {
  .vector-toolbox { grid-template-columns:1fr; }
  .vector-colour-group,.vector-toolbox > .vector-tool-group:last-child,.vector-invert-group,.vector-colour-group[hidden] + .vector-invert-group,.vector-colour-group[hidden] + .vector-invert-group[hidden] + .vector-tool-group { grid-column:1; grid-row:auto; }
  .vector-preview { position:sticky; top:0; z-index:4; margin-inline:-8px; padding:8px; border-bottom:1px solid var(--color-hairline); background:var(--color-paper); }
  .vector-stage { aspect-ratio:16/9; max-height:42dvh; }
  .vector-zoom-hint,.vector-preview [role=status] { margin-bottom:0; }
}
@media(max-width:640px) {
  .vector-content { padding:0 16px 20px; }
  .vector-heading { margin-top:-20px; }
  .vector-preview-bar { align-items:flex-start; flex-direction:column; }
  .vector-preview-actions { width:100%; justify-content:space-between; }
}
@media(max-width:760px) { .vector-colours { grid-template-columns:1fr; } .vector-colour-field { height:clamp(150px,48vw,220px); } }

.home-categories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 24px; margin:0 0 64px; }
.home-category { display:block; text-align:center; color:var(--color-ink-soft); text-decoration:none; }
.home-category-frame { border:1px solid var(--color-hairline); padding:12px; background:var(--color-paper); transition:border-color 180ms ease; }
.home-category img,.home-category video { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; }
.home-category-title { display:block; margin-top:12px; font-size:12px; font-weight:700; }
.home-category-description { display:block; max-width:38ch; margin:6px auto 0; font-size:12px; line-height:1.5; font-weight:400; color:var(--color-ink-soft); }
.home-categories-no-captions { gap:16px 24px; }
.home-category:hover .home-category-frame { border-color:var(--color-ink-soft); }
.home-category:focus-visible { outline:2px solid var(--color-focus); outline-offset:5px; }
.latest-styles-heading { margin:0 0 24px; font-size:20px; font-weight:500; letter-spacing:-.025em; }
.home-category-heading { margin-top:36px; }
@media(max-width:640px) { .latest-styles-heading { font-size:16px; } }

.homepage-collections { display:grid; gap:36px; margin:4px 0 72px; min-width:0; }
.homepage-collection { min-width:0; }
.homepage-collection-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 8px 12px; }
.homepage-collection-head h2 { margin:0; font-size:16px; font-weight:600; letter-spacing:-.02em; }
.homepage-collection-head h2 a { color:var(--color-ink); text-decoration:none; text-underline-offset:4px; }
.homepage-collection-head h2 a:hover { text-decoration:underline; }
.homepage-collection-head h2 a:focus-visible { outline:2px solid var(--color-focus); outline-offset:4px; border-radius:2px; }
.homepage-collection-controls { display:flex; gap:4px; }
.homepage-collection-controls button { display:grid; place-items:center; width:30px; height:30px; min-height:0; border:1px solid var(--color-hairline); border-radius:999px; background:transparent; color:var(--color-ink); padding:0; }
.homepage-collection-controls button:hover,.homepage-collection-controls button:focus-visible { border-color:var(--color-ink); }
.homepage-collection-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px) / 3.35); gap:16px; min-width:0; overflow-x:auto; overflow-y:hidden; padding:0 8px 12px; scroll-behavior:smooth; scroll-snap-type:x proximity; overscroll-behavior-inline:contain; scrollbar-width:thin; touch-action:pan-x pan-y; }
.homepage-collection-track:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; border-radius:var(--radius-sm); }
.homepage-collection-track .explore-card { display:block; align-self:start; scroll-snap-align:start; }
.homepage-collection-track .explore-card.active { grid-column:span 2; }
.collection-catalogue { padding-bottom:72px; }
@media(max-width:900px){.homepage-collection-track{grid-auto-columns:calc((100% - 24px) / 2.15)}}
@media(max-width:640px){
 .homepage-collections{gap:28px;margin-bottom:48px}
 .homepage-collection-head{margin-inline:4px}
 .homepage-collection-head h2{font-size:15px}
 .homepage-collection-controls{display:none}
 .homepage-collection-track{grid-auto-columns:82%;gap:12px;padding-inline:4px;scroll-snap-type:x mandatory}
 .homepage-collection-track .explore-card.active{grid-column:auto}
}

@media(max-width:340px) {
  .preview-actions { flex-wrap:wrap; row-gap:7px; }
  .preview-actions-primary { width:100%; }
  .preview-downloads { width:100%; justify-content:flex-end; }
}

/* Reserve each catalogue image's final shape and soften its arrival from R2. */
.thumbnail-loader {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--style-thumbnail-radius);
  background: #fafaf8;
  animation: thumbnail-loader-fade 1.8s ease-in-out infinite alternate;
  isolation: isolate;
}
.thumbnail-loader::after {
  content: none;
}
.thumbnail-loader img,
.thumbnail-loader video,
.home-category .thumbnail-loader img,
.home-category .thumbnail-loader video,
.explore-card .thumbnail-loader img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  background: transparent;
  opacity: 0;
  transition: opacity 420ms ease, transform var(--motion-soft);
}
.thumbnail-loader.is-loaded { animation:none; background:#f4f4f1; }
.thumbnail-loader.is-loaded img,.thumbnail-loader.is-loaded video { opacity: 1; }
.thumbnail-loader.is-error { animation:none; background:#eeeeeb; }
@keyframes thumbnail-loader-fade { from { background-color:#fafaf8; } to { background-color:#e7e7e4; } }

@media(max-width:700px) { .home-categories {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;} .home-categories-no-captions{gap:12px 16px;} }
@media(max-width:400px) { .home-category-frame {padding:6px;} }
@media(prefers-reduced-motion:reduce) {
  .thumbnail-loader { animation:none; background:#eeeeeb; }
  .thumbnail-loader img,.thumbnail-loader video { transition:none; }
  .homepage-collection-track { scroll-behavior:auto; }
}
@media (hover:none), (pointer:coarse) {
  .explore-card:hover { box-shadow:var(--style-frame); transform:none; }
  .explore-card:hover .style-save-button { opacity:1; }
  .home-category:hover .home-category-frame { border-color:var(--color-hairline); }
}
.cookie-consent { position:fixed; z-index:120; right:18px; bottom:18px; width:min(520px,calc(100vw - 36px)); display:flex; align-items:flex-end; justify-content:space-between; gap:22px; border:1px solid var(--color-hairline); border-radius:14px; background:var(--color-paper); color:var(--color-ink); box-shadow:var(--shadow-soft); padding:18px; }
.cookie-consent strong { display:block; margin-bottom:5px; font-size:15px; }
.cookie-consent p { margin:0; font-size:12px; line-height:1.55; }
.cookie-read-more,.footer-link-button,.privacy-cookie-settings { border:0; background:transparent; color:inherit; padding:0; font:inherit; text-decoration:underline; text-underline-offset:3px; }
.cookie-consent-actions { display:grid; flex:0 0 auto; gap:7px; }
.cookie-consent-actions button { white-space:nowrap; padding:8px 11px; font-size:11px; }
.site-footer .footer-link-button { color:inherit; font-size:inherit; text-decoration:none; }
.cookie-settings-dialog { width:min(720px,calc(100vw - 32px)); }
.cookie-settings-copy { padding:4px 34px 34px; }
.cookie-settings-copy h2 { margin:3px 0 12px; font-size:clamp(30px,5vw,48px); font-weight:500; letter-spacing:-.04em; }
.cookie-settings-copy > p { max-width:62ch; }
.cookie-settings-copy section { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-top:18px; border-top:1px solid var(--color-hairline); padding-top:18px; }
.cookie-settings-copy h3 { margin:0 0 5px; font-size:14px; text-transform:uppercase; letter-spacing:.04em; }
.cookie-settings-copy section p { margin:0; color:var(--color-muted); font-size:12px; line-height:1.55; }
.cookie-always-on { flex:0 0 auto; color:var(--color-muted); font-size:11px; font-weight:700; }
.cookie-switch { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; }
.cookie-switch input { width:20px; height:20px; accent-color:var(--color-ink); }
.cookie-settings-copy details { margin:22px 0; border-block:1px solid var(--color-hairline); padding:14px 0; }
.cookie-settings-copy summary { cursor:pointer; font-weight:700; }
@media(max-width:540px){.cookie-consent{align-items:stretch;flex-direction:column}.cookie-consent-actions{grid-template-columns:1fr 1fr}.cookie-settings-copy{padding:4px 20px 24px}.cookie-settings-copy section{gap:14px}}
.simple-image-preview { width:min(1200px,calc(100vw - 24px)); }
.simple-preview-image { display:block; width:100%; height:65dvh; object-fit:contain; padding:12px; }
.simple-preview-actions { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px; }
.simple-preview-downloads { display:flex; align-items:center; gap:12px; }
.simple-preview-downloads .copy-menu-options { left:auto; right:0; bottom:calc(100% + 7px); }
.simple-preview-studio-link { color:var(--color-ink); font-size:12px; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
@media(max-width:520px){.simple-preview-actions{align-items:flex-start;gap:10px;flex-wrap:wrap}.simple-preview-downloads{width:100%;justify-content:flex-end;gap:7px;flex-wrap:wrap}.simple-preview-downloads button{padding-inline:10px}}
.simple-preview-status { text-align:center; font-size:13px; margin:0 16px 20px; color:var(--color-muted); }
.theme-switch { display:inline-flex; align-items:center; gap:8px; padding:6px 8px; border:0; border-radius:24px; color:var(--color-ink-soft); background:transparent; font-size:11px; flex-shrink:0; }
.theme-switch > span:first-child { display:block; position:relative; width:30px; height:18px; border:1px solid var(--color-hairline); border-radius:20px; background:var(--color-wash); }
.theme-switch > span:first-child::after { content:''; position:absolute; top:3px; left:3px; width:10px; height:10px; border-radius:50%; background:var(--color-ink); transition:transform 180ms ease; }
.theme-switch[aria-checked=true] > span:first-child::after { transform:translateX(12px); }
.profile-theme-switch { justify-content:space-between; width:100%; padding:4px 0; color:var(--color-ink); }
.profile-theme-switch .theme-switch-label { display:block; order:-1; }
.simple-preview-refined { margin:8px 28px 28px; }
.style-history-copy p { line-height:1.7; }
.style-history-sources { font-size:12px; margin-top:16px; }
.style-history-sources a { color:var(--color-muted); text-decoration:underline; text-underline-offset:3px; }
@media(prefers-reduced-motion:reduce) { .theme-switch > span:first-child::after {transition:none;} }
.results-search-form { display:flex; gap:12px; max-width:720px; margin:28px 0 18px; }
.results-search-form input { flex:1; min-width:0; padding:14px 16px; background:var(--color-paper); color:var(--color-ink); border:1px solid var(--color-hairline); border-radius:8px; font:inherit; }
.search-result-count { color:var(--color-muted); font-size:13px; margin:0 0 28px; }
.search-form:not(.open) .search-submit { display:none; }
.search-submit { padding:8px 10px; font-size:12px; }
.mobile-search-form .search-submit { margin-left:8px; }
/* Search opens below the header without resizing or clipping its controls. */
.search-form, .search-form.open, .search-form:focus-within { width:38px; height:38px; flex:0 0 38px; overflow:visible; transition:none; }
.search-popover { position:absolute; top:calc(100% + 12px); right:0; display:flex; gap:8px; width:min(360px,calc(100vw - 40px)); padding:10px; border:1px solid var(--color-hairline); border-radius:14px; background:var(--color-paper); box-shadow:var(--shadow-soft); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-4px); transition:opacity 160ms ease-out,transform 160ms ease-out; z-index:60; }
.search-form.open .search-popover {opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
.search-form .search-popover input { flex:1; min-width:0; width:0; padding:8px 12px; border:1px solid var(--color-hairline); border-radius:8px; background:var(--color-surface); opacity:1;transform:none;transition:none; }
.search-popover .search-submit {border-radius:8px; flex-shrink:0;}
.topbar-actions {order:2;}
@media(max-width:1120px) {
 .topbar-actions {display:flex;gap:6px;}
 .topbar-actions .about-link, .topbar-actions .profile-menu {display:none;}
 .nav-left {flex:1;}
 .theme-switch-label {display:none;}
}
@media(prefers-reduced-motion:reduce) { .search-popover {transition:none;} }

@media (max-width: 1120px) {
  .topbar {grid-template-columns:minmax(0,1fr) auto auto;gap:8px;justify-items:stretch;}
  .nav-left {display:contents;}
  .brand {order:1;}
  .menu-toggle {order:3;}
  .topbar-actions {justify-self:end;}
}
@media (max-width: 1120px) {
  .search-popover {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 68px);
    right: 20px;
    left: 20px;
    width: auto;
    max-width: none;
  }
}

@media (max-width: 760px) {
  /* Mobile Safari enlarges the viewport when a focused form control is below 16px. */
  input:is([type="search"], [type="text"], [type="email"], [type="password"], [type="number"]),
  textarea,
  select {
    font-size: 16px;
  }

  .search-popover .search-submit { display: none; }
  .search-form .search-popover input { width: 100%; }
}

/* The drawer search submits on Enter and needs no separate button. */
.mobile-search-form {display:block;}
.mobile-search-field {position:relative;min-width:0;}
.mobile-search-field input {box-sizing:border-box;width:100%;padding-left:40px;padding-right:12px;}

/* Keep the selected card anchored while the previous generator contracts. */
#exploreGrid.switching-generator {
  overflow-anchor: none;
}

/* Account navigation retains the existing circular avatar treatment. */
.profile-button { font-size:12px; letter-spacing:-.03em; font-weight:500; }
.profile-dropdown[hidden] { display:none; }
.profile-signout { text-align:left; padding:0; min-height:32px; border:0; background:transparent; color:var(--color-ink); font:inherit; }
.account-menu-status { margin:0; font-size:12px; }
.account-menu-status:empty { display:none; }
.account-dialog-copy h2 { font-size:clamp(30px,5vw,42px); margin:0 0 16px; }
.account-dialog-copy { position:relative; padding-top:8px; }
.account-dialog-brand { position:absolute; top:-36px; left:32px; display:block; width:38px; height:38px; object-fit:contain; }
.account-dialog-copy .google-sign-in { color:var(--color-paper); text-decoration:none; width:100%; margin:12px 0; }
.account-dialog-copy > p + .google-sign-in { margin-top:24px; }
.marketing-choice { display:flex !important; align-items:flex-start; gap:11px; color:var(--color-ink) !important; font-size:14px !important; font-weight:400 !important; }
.marketing-choice input { width:18px; height:18px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--color-ink); }
.marketing-choice span { display:grid; gap:3px; }
.marketing-choice small { color:var(--color-muted); font-size:12px; line-height:1.4; }
.account-marketing-choice { margin:22px 0 16px; }
.account-registration-choice { margin:18px 0 8px; color:var(--color-muted); font-size:13px; }
.account-registration-choice > summary { cursor:pointer; }
.auth-provider-button { box-sizing:border-box; display:grid !important; grid-template-columns:28px minmax(0,1fr) 18px; align-items:center; gap:12px; min-height:54px; border:1px solid color-mix(in srgb,#fff 22%,transparent); border-radius:10px; background:#202020; padding:7px 14px; font-size:14px; font-weight:650; }
.auth-provider-button img { display:block; width:24px; height:24px; object-fit:contain; }
.auth-provider-button > span:nth-child(2) { text-align:center; }
.auth-provider-button > span:last-child { text-align:right; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--color-muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.auth-divider::before,.auth-divider::after { content:""; height:1px; flex:1; background:var(--color-hairline); }
.email-auth-form,.email-code-form { display:grid; gap:10px; }
.email-auth-form label,.email-code-form label { font-size:12px; font-weight:650; }
.email-auth-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.email-auth-row input,.email-code-form input { width:100%; box-sizing:border-box; min-height:52px; border:1px solid var(--color-hairline); border-radius:9px; background:var(--color-paper); color:var(--color-ink); padding:12px 14px; font:inherit; font-size:16px; }
.email-auth-row button,.email-code-form button { min-height:52px; border-radius:9px; }
.email-code-form input { max-width:260px; font-size:28px; letter-spacing:.28em; font-weight:650; }
.email-auth-status { min-height:22px; margin:0; color:var(--color-muted); font-size:13px; }
.email-auth-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.email-auth-actions .text-button { border:0; background:transparent; color:var(--color-muted); }
@media(max-width:560px){.email-auth-row{grid-template-columns:1fr}.account-dialog-copy{padding-inline:22px}.account-dialog-brand{left:22px}.email-code-form input{max-width:none}}

#regenerateForm input { width:100%; margin:8px 0 20px; }

.generator-credit-pack { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-top:8px; font-size:12px; color:var(--color-muted); }
.generator-credit-pack button { min-height:36px; padding:7px 13px; border:1px solid var(--color-hairline); border-radius:999px; background:var(--color-paper); color:var(--color-ink); }
.membership-intro { max-width:680px; margin:0 0 18px !important; }
.membership-plans { display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.membership-plans section { padding:16px; border:1px solid var(--color-hairline); border-radius:12px; }
.account-management { margin:10px 0 20px; border-block:1px solid var(--color-hairline); }
.account-management > summary { cursor:pointer; padding:14px 0; font-size:13px; }
.account-management-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; padding:12px 0 26px; }
.account-management-grid h2 { margin:4px 0 12px; font-size:24px; font-weight:500; }
.account-management-grid section > p:not(.eyebrow) { color:var(--color-muted); font-size:13px; }
#emailPreferencesForm { display:grid; gap:14px; }
.account-preferences-status { min-height:20px; margin:0; color:var(--color-muted); font-size:12px; }
@media(max-width:700px){.membership-plans{grid-template-columns:1fr;}}
@media(max-width:700px){.account-management-grid{grid-template-columns:1fr;gap:24px}}

/* SVG Studio */
.svg-studio-page { padding:0 0 72px; }
.svg-studio-hero { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding-bottom:clamp(18px,2.5vw,30px); border-bottom:1px solid var(--color-hairline); }
.svg-studio-hero .eyebrow { margin:0; }
.svg-studio-hero h1 { margin:0; font-size:clamp(58px,10vw,144px); font-weight:500; line-height:.82; letter-spacing:-.075em; }
.svg-studio-hero-copy { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; padding-top:4px; }
.svg-studio-hero-copy h2 { margin:0; font-size:clamp(24px,3vw,42px); font-weight:500; line-height:1; letter-spacing:-.04em; }
.svg-studio-hero-copy p { max-width:38ch; margin:0; color:var(--color-muted); font-size:clamp(14px,1.35vw,18px); line-height:1.4; }
.svg-studio-access { max-width:720px; margin:clamp(42px,7vw,84px) auto; padding:clamp(28px,5vw,56px); border:1px solid var(--color-hairline); border-radius:18px; text-align:center; }
.svg-studio-access h2 { margin:8px 0 16px; font-size:clamp(30px,5vw,54px); font-weight:500; line-height:1; letter-spacing:-.05em; }
.svg-studio-access > p:not(.eyebrow) { max-width:54ch; margin:0 auto 26px; color:var(--color-muted); line-height:1.6; }
.svg-studio-access .google-sign-in { max-width:360px; margin:28px auto 0; }
.svg-studio-membership-link { display:inline-flex; min-height:44px; align-items:center; padding:0 18px; border-radius:8px; text-decoration:none; }
.svg-studio-workspace { padding:clamp(18px,2.5vw,30px) 0 clamp(38px,6vw,70px); }
.svg-studio-workspace h2 { margin:8px 0 24px; font-size:clamp(27px,3vw,42px); font-weight:500; letter-spacing:-.04em; }
.svg-studio-status { min-height:22px; margin:0 0 8px; color:var(--color-muted); font-size:12px; }
.svg-studio-status:empty { display:none; }
.svg-studio-library-heading { display:flex; justify-content:flex-end; min-height:20px; margin-bottom:8px; }
.svg-studio-library-heading a { color:var(--color-muted); font-size:12px; }
.svg-studio-source-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px 18px; }
.svg-studio-source { min-width:0; padding:0; border:0; background:transparent; color:var(--color-ink); text-align:left; }
.svg-studio-source > span { display:block; border:1px solid var(--color-hairline); border-radius:12px; overflow:hidden; background:var(--color-wash); transition:border-color 180ms ease,transform 180ms ease; }
.svg-studio-source:hover > span,.svg-studio-source:focus-visible > span { border-color:var(--color-ink); transform:translateY(-2px); }
.svg-studio-source:focus-visible { outline:none; }
.svg-studio-source strong,.svg-studio-source small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.svg-studio-source strong { margin-top:10px; font-size:13px; font-weight:500; }
.svg-studio-source small { margin-top:4px; color:var(--color-muted); }
.svg-studio-empty { grid-column:1 / -1; padding:34px; border:1px solid var(--color-hairline); border-radius:12px; color:var(--color-muted); line-height:1.6; }
.svg-studio-note { display:grid; grid-template-columns:minmax(140px,.35fr) minmax(0,1fr); gap:30px; padding-top:30px; border-top:1px solid var(--color-hairline); }
.svg-studio-note p { margin:0; max-width:70ch; line-height:1.65; }
@media(max-width:900px) { .svg-studio-source-grid {grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:820px) { .svg-studio-hero-copy {display:block;} .svg-studio-hero-copy h2 {margin-bottom:8px;} }
@media(max-width:520px) { .svg-studio-source-grid {grid-template-columns:1fr;} .svg-studio-note {grid-template-columns:1fr;gap:10px;} }
@media(prefers-reduced-motion:reduce) { .svg-studio-source > span {transition:none;} }

/* Community submissions */
.submission-page { padding:8px 0 90px; }
.submission-hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); align-items:end; gap:30px; border-bottom:1px solid var(--color-hairline); padding:10px 0 clamp(38px,7vw,76px); }
.submission-hero .eyebrow { grid-column:1/-1; margin:0; }
.submission-hero h1 { margin:0; font-size:clamp(54px,9vw,132px); font-weight:500; line-height:.84; letter-spacing:-.07em; }
.submission-hero > p { max-width:38ch; margin:0; color:var(--color-muted); font-size:clamp(16px,1.7vw,22px); line-height:1.4; }
.submission-hero > .primary-button { justify-self:start; }
.submission-form { max-width:980px; margin:clamp(38px,6vw,76px) auto 0; }
.submission-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.submission-form label { display:grid; gap:8px; font-size:12px; font-weight:700; letter-spacing:.04em; }
.submission-form input,.submission-form textarea { width:100%; border:1px solid var(--color-hairline); border-radius:10px; background:var(--color-paper); padding:13px 14px; color:var(--color-ink); font:inherit; font-weight:400; letter-spacing:0; }
.submission-description { grid-column:1/-1; }
.submission-description textarea { min-height:150px; resize:vertical; }
.submission-image-picker { margin-top:20px; border:1px dashed var(--color-muted); border-radius:14px; background:var(--color-wash); padding:24px; cursor:pointer; }
.submission-image-picker input { padding:0; border:0; background:transparent; }
.submission-image-picker strong,.submission-image-picker small { display:block; letter-spacing:0; }
.submission-image-picker small { color:var(--color-muted); font-weight:400; line-height:1.5; }
.submission-previews { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.submission-previews:empty { display:none; }
.submission-previews figure { margin:0; border:1px solid var(--color-hairline); border-radius:12px; overflow:hidden; background:var(--color-wash); }
.submission-previews img { display:block; width:100%; aspect-ratio:4/3; object-fit:contain; }
.submission-previews figcaption { padding:9px 11px; color:var(--color-muted); font-size:11px; }
.submission-confirmation { grid-template-columns:auto 1fr !important; align-items:start; margin-top:18px; font-weight:400 !important; letter-spacing:0 !important; line-height:1.45; }
.submission-confirmation input { width:auto; margin-top:3px; }
.submission-privacy { margin:18px 0 0; color:var(--color-muted); font-size:12px; line-height:1.5; }
.submission-actions { display:flex; align-items:center; gap:18px; margin-top:24px; }
.submission-actions p { margin:0; color:var(--color-muted); font-size:12px; }
.submission-history { max-width:980px; margin:62px auto 0; border-top:1px solid var(--color-hairline); padding-top:28px; }
.submission-history h2 { margin:0 0 18px; font-size:clamp(25px,3vw,38px); font-weight:500; }
.submission-history-list { display:grid; gap:8px; }
.submission-history-list article { display:flex; justify-content:space-between; gap:20px; border:1px solid var(--color-hairline); border-radius:10px; padding:15px; }
.submission-history-list article span:first-child { display:grid; gap:4px; }
.submission-history-list small { color:var(--color-muted); }
.submission-status { align-self:center; border:1px solid var(--color-hairline); border-radius:999px; padding:5px 9px; font-size:10px; font-weight:700; text-transform:uppercase; }
.submission-status.approved { border-color:#27834f; color:#1c6a3f; }
.submission-status.declined { color:#8a3b32; }
@media(max-width:720px){.submission-hero{grid-template-columns:1fr}.submission-fields{grid-template-columns:1fr}.submission-description{grid-column:auto}.submission-previews{grid-template-columns:1fr}.submission-actions,.submission-history-list article{align-items:flex-start;flex-direction:column}}

/* Membership */
.upgrade-page { padding:0 0 80px; }
.upgrade-hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); align-items:end; gap:36px; padding:12px 0 clamp(40px,7vw,86px); border-bottom:1px solid var(--color-hairline); }
.upgrade-hero .eyebrow { grid-column:1 / -1; margin:0; }
.upgrade-hero h1 { margin:0; font-size:clamp(62px,10vw,148px); font-weight:500; line-height:.82; letter-spacing:-.075em; }
.upgrade-hero > p:last-child { max-width:32ch; margin:0 0 5px; color:var(--color-muted); font-size:clamp(17px,2vw,24px); line-height:1.35; }
.upgrade-subscription-summary:empty { display:none; }
.upgrade-active-subscription { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 24px; border-bottom:1px solid var(--color-hairline); padding:22px 0; }
.upgrade-active-subscription .eyebrow { flex-basis:100%; margin:0; }
.upgrade-active-subscription h2 { margin:0 auto 0 0; font-size:clamp(28px,4vw,48px); font-weight:500; letter-spacing:-.045em; }
.upgrade-active-subscription p { margin:0; color:var(--color-muted); font-size:14px; }
.upgrade-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding:clamp(42px,7vw,90px) 0 34px; }
.upgrade-plan { display:flex; min-height:500px; flex-direction:column; gap:26px; border:1px solid var(--color-hairline); border-radius:20px; background:var(--color-paper); padding:clamp(24px,3vw,38px); }
.upgrade-plan-featured { border-color:color-mix(in srgb,#d4b900 70%,var(--color-hairline)); background:color-mix(in srgb,#f1d21a 8%,var(--color-paper)); }
.upgrade-plan.is-current { border-color:#111; background:#111; color:#fff; box-shadow:inset 0 0 0 2px #111; }
.upgrade-plan.is-current .eyebrow,.upgrade-plan.is-current .upgrade-price > span,.upgrade-plan.is-current .upgrade-included { color:#c9c9c9; }
.upgrade-plan.is-current li { border-color:rgba(255,255,255,.24); }
.upgrade-plan.is-current .upgrade-current { border:1px solid rgba(255,255,255,.55); background:#fff; color:#111; }
.upgrade-plan.is-current .secondary-button { border-color:#fff; background:transparent; color:#fff; }
.upgrade-plan.is-unavailable { border-color:var(--color-hairline); background:var(--color-wash); opacity:.48; filter:grayscale(1); }
.upgrade-plan h2 { margin:8px 0 0; font-size:clamp(34px,4vw,58px); font-weight:500; line-height:.95; letter-spacing:-.055em; }
.upgrade-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; margin:0; }
.upgrade-price strong { font-size:clamp(42px,5vw,70px); font-weight:500; letter-spacing:-.06em; }
.upgrade-price > span { color:var(--color-muted); font-size:13px; }
.upgrade-price .upgrade-standard { flex-basis:100%; }
.upgrade-plan ul { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.upgrade-plan li { border-top:1px solid var(--color-hairline); padding-top:12px; line-height:1.45; }
.upgrade-plan li::before { content:'↗'; display:inline-block; margin-right:9px; }
.upgrade-generation-allowance { font-weight:750; }
.upgrade-free-guest { margin:0; color:var(--color-muted); line-height:1.45; }
.preview-actions .is-locked,.library-card-actions .is-locked,.simple-preview-actions .is-locked { border-style:dashed; color:var(--color-muted); }
.upgrade-plan-action { display:grid; gap:10px; margin-top:auto; }
.upgrade-plan-action .primary-button,.upgrade-plan-action .secondary-button { width:100%; min-height:48px; border-radius:999px; }
.upgrade-current { display:block; border-radius:999px; background:var(--color-ink); padding:14px 18px; color:var(--color-paper); text-align:center; font-weight:700; }
.upgrade-included { margin:0; color:var(--color-muted); font-size:13px; }
.upgrade-credit-pack { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; border:1px solid var(--color-hairline); border-radius:16px; padding:24px clamp(22px,3vw,34px); }
.upgrade-credit-pack .eyebrow,.upgrade-credit-pack h2,.upgrade-credit-pack p { margin:0; }
.upgrade-credit-pack h2 { margin-top:6px; font-size:clamp(24px,3vw,38px); font-weight:500; letter-spacing:-.04em; }
.upgrade-credit-pack div > p:last-child { margin-top:6px; color:var(--color-muted); }
.upgrade-credit-pack-action .secondary-button { min-width:180px; }
.upgrade-status { min-height:24px; margin:0; color:var(--color-muted); }
.upgrade-note { display:grid; grid-template-columns:minmax(150px,.35fr) minmax(0,1fr); gap:30px; margin-top:30px; border-top:1px solid var(--color-hairline); padding-top:30px; }
.upgrade-note p { max-width:62ch; margin:0; line-height:1.6; }

@media(max-width:900px){
  .upgrade-hero { grid-template-columns:1fr; }
  .upgrade-plans { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .upgrade-plan { min-height:390px; gap:18px; padding:18px; }
  .upgrade-plan h2 { font-size:clamp(27px,6vw,42px); }
  .upgrade-price strong { font-size:clamp(31px,8vw,48px); }
  .upgrade-plan-action .primary-button,.upgrade-plan-action .secondary-button { min-height:42px; padding:9px 10px; font-size:11px; line-height:1.25; white-space:normal; }
}
@media(max-width:640px){
  .upgrade-hero h1 { font-size:clamp(54px,19vw,90px); }
  .upgrade-active-subscription { align-items:flex-start; }
  .upgrade-note { grid-template-columns:1fr; gap:10px; }
  .upgrade-plan { min-height:350px; padding:14px; border-radius:14px; }
  .upgrade-plan h2 { font-size:clamp(23px,7vw,34px); }
  .upgrade-plan li { font-size:12px; }
  .upgrade-credit-pack { grid-template-columns:1fr; gap:18px; }
  .upgrade-credit-pack-action .secondary-button { width:100%; }
}

@media(max-width:1120px){
  .mobile-nav-account {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 58px 4px 0;
    border-bottom:1px solid var(--color-hairline);
    padding:0 0 14px;
  }
  .mobile-nav-account .mobile-user-identity > div { display:grid; gap:1px; }
  .mobile-nav-account .mobile-user-identity small { color:var(--color-muted); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
  .mobile-nav-account .mobile-user-actions { flex-wrap:wrap; }
  .mobile-nav-tools { flex:0 0 auto; border-top:0; padding-top:0; }
  .mobile-nav-upgrade,.mobile-nav-upgrade:hover,.mobile-nav-upgrade:focus-visible {
    margin-top:8px;
    border:1px solid #111;
    border-radius:12px;
    background:#111;
    padding:4px 11px;
    color:#fff;
    font-size:clamp(21px,4.6dvh,28px);
    font-weight:450;
    letter-spacing:-.035em;
    line-height:1.15;
  }
  .mobile-nav-upgrade.active { color:#fff; }
}