.shape-lab {
  --sl-ink:#252b29;
  --sl-muted:#737870;
  --sl-paper:#fafaf7;
  background:var(--sl-paper);
  color:var(--sl-ink);
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  min-height:100vh;
}
.shape-lab * {
  box-sizing:border-box;
}
.shape-lab button,.shape-lab input,.shape-lab a {
  font:inherit;
}
.shape-lab button,.shape-lab a {
  -webkit-tap-highlight-color:transparent;
}
.shape-lab button {
  cursor:pointer;
}
.shape-lab a {
  color:inherit;
  text-decoration:none;
}
.shape-lab button:focus-visible,.shape-lab a:focus-visible,.shape-lab input:focus-visible {
  outline:3px solid #719c86;
  outline-offset:5px;
}
.shape-lab [hidden] {
  display:none!important;
}
.sl-body {
  max-width:1450px;
  margin:auto;
  padding:0 64px;
}
.sl-header {
  padding:36px 0 44px;
}
.sl-eyebrow {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:10px;
  letter-spacing:1.5px;
  font-weight:650;
  color:#737b6b;
}
.sl-heading {
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:flex-end;
  margin-top:32px;
}
.sl-heading h1 {
  font-size:clamp(44px,5vw,72px);
  line-height:1.08;
  letter-spacing:-3.5px;
  font-weight:550;
  margin:0 0 16px;
}
.sl-heading h1 span {
  color:#8a9e70;
}
.sl-heading p {
  font-size:23px;
  margin:0 0 12px;
  letter-spacing:-.6px;
}
.sl-intro {
  color:var(--sl-muted);
  font-size:14px;
  line-height:1.8;
}
.sl-collection {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-bottom:3px;
}
.sl-collection>span {
  font-size:10px;
  color:var(--sl-muted);
  text-align:center;
}
.shape-lab .sl-primary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  background:#303e32;
  color:#fff;
  border-radius:5px;
  padding:16px 23px;
  font-size:13px;
  font-weight:550;
  transition:background .2s;
}
.shape-lab .sl-primary:hover {
  background:#4d614a;
}
.sl-primary span {
  font-size:20px;
}
.sl-toolbar {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #dedfd6;
  border-bottom:1px solid #dedfd6;
  padding:20px 0;
}
.sl-filters {
  display:flex;
  gap:5px;
  align-items:center;
}
.sl-filters button {
  background:none;
  border:0;
  border-radius:5px;
  padding:10px 14px;
  color:#72776d;
  font-size:12px;
  white-space:nowrap;
}
.sl-filters button[aria-pressed=true] {
  background:#e7ebdf;
  color:#34442d;
}
.sl-filters button span {
  padding-left:8px;
  font-size:10px;
  opacity:.65;
}
.sl-search {
  display:flex;
  align-items:center;
  gap:7px;
  color:#81867a;
}
.sl-search>span {
  font-size:26px;
}
.sl-search input {
  background:transparent;
  border:0;
  width:160px;
  padding:8px;
  font-size:12px;
  color:var(--sl-ink);
}
.sl-results {
  display:flex;
  justify-content:space-between;
  margin:24px 0 18px;
  font-size:11px;
  color:#7b8075;
}
.sl-results>span+span {
  font-size:9px;
  letter-spacing:1.5px;
}
.sl-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:24px;
  row-gap:36px;
}
.sl-model {
  width:100%;
  aspect-ratio:1.06;
  background:#f1f0eb;
  border:1px solid #e9e8e1;
  border-radius:7px;
  position:relative;
  padding:0;
  overflow:hidden;
}
.sl-model img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .4s;
}
.sl-model:hover img {
  transform:scale(1.055);
}
.sl-number {
  position:absolute;
  top:13px;
  left:15px;
  z-index:1;
  font:10px ui-monospace,monospace;
  color:#999d92;
}
.sl-enlarge {
  position:absolute;
  bottom:12px;
  right:14px;
  color:#737e6a;
  font-size:18px;
}
.sl-card-info {
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:17px 0 0;
}
.sl-category {
  font-size:9px;
  letter-spacing:1.3px;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#7b8175;
}
.sl-category:before {
  content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--sl-accent,#869b77);
}
.sl-card h2 {
  font-size:16px;
  font-weight:550;
  letter-spacing:-.3px;
  margin:5px 0 7px;
}
.sl-card h2 button {
  border:0;
  padding:0;
  background:none;
  text-align:left;
  color:inherit;
}
.sl-card p {
  font-size:10px;
  color:#81867c;
  margin:0;
}
.sl-card p span {
  color:#a1a59a;
  margin-left:5px;
}
.shape-lab .sl-download {
  display:grid;
  color:#5b6855;
  place-items:center;
  border:1px solid #dedfd4;
  width:33px;
  height:33px;
  border-radius:50%;
  align-self:center;
  font-size:18px;
}
.shape-lab .sl-download:hover {
  background:#e6eadf;
}
.sl-notes {
  margin:70px 0 0;
  padding:35px 0 40px;
  border-top:1px solid #dedfd6;
  border-bottom:1px solid #dedfd6;
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:50px;
}
.sl-notes h2 {
  font-weight:500;
  font-size:26px;
  line-height:1.3;
  letter-spacing:-.8px;
  margin:17px 0 0;
}
.sl-notes h3 {
  font-size:13px;
  font-weight:600;
  margin:0 0 12px;
}
.sl-notes p {
  font-size:12px;
  line-height:1.85;
  color:var(--sl-muted);
  margin:0;
}
.sl-footer {
  padding:25px 0 35px;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#7c8176;
}
.sl-empty {
  text-align:center;
  padding:65px 20px;
}
.sl-empty h2 {
  font-size:24px;
}
.sl-empty p {
  font-size:14px;
  color:var(--sl-muted);
}
.sl-empty button {
  border:0;
  background:none;
  text-decoration:underline;
  padding:15px;
}
.sl-dialog {
  padding:0;
  border:0;
  border-radius:12px;
  width:min(1050px,94vw);
  max-height:92dvh;
  background:var(--sl-paper);
  color:var(--sl-ink);
  overflow:auto;
}
.sl-dialog::backdrop {
  background:#202b256b;
  backdrop-filter:blur(8px);
}
.sl-close {
  position:absolute;
  right:16px;
  top:12px;
  border:1px solid #dcded2;
  border-radius:50%;
  width:35px;
  height:35px;
  z-index:2;
  background:var(--sl-paper);
  font-size:25px!important;
  line-height:1;
}
.sl-detail {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  min-height:520px;
}
.sl-detail-image {
  background:#f1f0eb;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:20px 10px;
}
.sl-detail-image img {
  width:100%;
  height:auto;
}
.sl-detail-image>span {
  font-size:8px;
  letter-spacing:1.2px;
  color:#8b8f83;
  padding-bottom:15px;
}
.sl-detail-info {
  padding:56px 36px 25px;
}
.sl-detail-info h2 {
  font-size:34px;
  font-weight:500;
  letter-spacing:-1.2px;
  margin:10px 0 16px;
  line-height:1.15;
}
.sl-description {
  font-size:13px;
  line-height:1.8;
  color:var(--sl-muted);
}
.sl-detail-info dl {
  margin:22px 0;
  font-size:11px;
}
.sl-detail-info dl div {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:11px 0;
  border-bottom:1px solid #e1e3d9;
}
.sl-detail-info dt {
  color:#82877c;
}
.sl-detail-info dd {
  margin:0;
  text-align:right;
}
.sl-print-note {
  font-size:11px;
  line-height:1.7;
  color:#727c6c;
  background:#edf0e6;
  padding:13px;
  border-radius:4px;
  margin-bottom:18px;
}
.sl-tested {
  font-size:9px;
  color:#888e81;
  margin:12px 0 23px;
}
.sl-pagination {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  color:#858b7e;
}
.sl-pagination button {
  border:0;
  background:none;
  padding:8px 0;
  color:#525e4b;
}
.sl-dialog-open {
  overflow:hidden;
}
@media(max-width:1000px) {
  .sl-body {
    padding:0 30px;
  }
  .sl-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .sl-notes {
    gap:25px;
  }
  .sl-toolbar {
    gap:10px;
  }
  .sl-filters button {
    padding:10px;
  }
  .sl-search input {
    width:135px;
  }
}
@media(max-width:640px) {
  .sl-body {
    padding:0 20px;
  }
  .sl-header {
    padding:25px 0 28px;
  }
  .sl-eyebrow {
    font-size:8px;
    letter-spacing:.8px;
  }
  .sl-heading {
    display:block;
    margin-top:28px;
  }
  .sl-heading h1 {
    font-size:47px;
    letter-spacing:-2.8px;
  }
  .sl-heading p {
    font-size:20px;
  }
  .sl-intro {
    font-size:12px;
  }
  .sl-desktop {
    display:none;
  }
  .sl-collection {
    margin-top:25px;
    align-items:flex-start;
    gap:9px;
  }
  .sl-collection .sl-primary {
    width:100%;
  }
  .sl-collection>span {
    align-self:center;
  }
  .sl-toolbar {
    flex-direction:column;
    gap:12px;
    padding:15px 0;
  }
  .sl-filters {
    justify-content:space-between;
    gap:0;
  }
  .sl-filters button {
    font-size:11px;
    padding:9px;
  }
  .sl-filters button span {
    padding-left:4px;
  }
  .sl-search {
    border:1px solid #e3e5db;
    border-radius:5px;
    padding:0 10px;
  }
  .sl-search input {
    width:100%;
  }
  .sl-results {
    font-size:10px;
  }
  .sl-results>span+span {
    font-size:7px;
    letter-spacing:.7px;
  }
  .sl-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:25px 13px;
  }
  .sl-card h2 {
    font-size:14px;
  }
  .sl-card p {
    font-size:8px;
  }
  .sl-category {
    font-size:8px;
    letter-spacing:.8px;
  }
  .sl-card-info {
    gap:2px;
    padding-top:10px;
  }
  .shape-lab .sl-download {
    width:36px;
    height:36px;
    flex-shrink:0;
  }
  .sl-number {
    font-size:8px;
    top:9px;
    left:10px;
  }
  .sl-notes {
    grid-template-columns:1fr;
    gap:25px;
    margin-top:40px;
  }
  .sl-notes h2 {
    font-size:28px;
  }
  .sl-footer {
    font-size:9px;
  }
  .sl-dialog {
    width:94vw;
    max-height:94dvh;
  }
  .sl-detail {
    grid-template-columns:1fr;
  }
  .sl-detail-image {
    padding:0;
  }
  .sl-detail-image img {
    height:270px;
    object-fit:contain;
  }
  .sl-detail-image>span {
    font-size:7px;
  }
  .sl-detail-info {
    padding:25px;
  }
  .sl-detail-info h2 {
    font-size:29px;
  }
  .sl-detail-info dl {
    margin:15px 0;
  }
  .sl-close {
    top:9px;
    right:9px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .shape-lab * {
    transition:none!important;
  }
}
html:has(.shape-lab) {
  scrollbar-gutter:auto;
  color-scheme:light;
}
.sl-dialog {
  margin:auto;
}
.sl-dialog {
  width:min(1050px,calc(100vw - 48px));
  height:min(680px,calc(100dvh - 48px));
  overflow:visible;
}
.sl-detail {
  height:100%;
  min-height:0;
  overflow:hidden;
  border-radius:inherit;
}
.sl-detail-image {
  min-height:0;
  overflow:hidden;
}
.sl-detail-image img {
  min-height:0;
  object-fit:contain;
}
.sl-detail-info {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  min-height:0;
  padding:48px 28px 16px;
}
.sl-detail-copy {
  overflow:auto;
  min-height:0;
  padding-right:8px;
  scrollbar-width:thin;
}
.sl-detail-info h2 {
  font-size:29px;
  margin:8px 0 12px;
}
.sl-detail-info dl {
  margin:12px 0;
}
.sl-detail-info dl div {
  padding:7px 0;
}
.sl-detail-actions {
  padding-top:12px;
  border-top:1px solid #e1e3d9;
  background:var(--sl-paper);
}
.sl-detail-actions .sl-primary {
  width:100%;
  justify-content:space-between;
}
.sl-detail-actions .sl-tested {
  margin:8px 0 4px;
}
@media(max-width:640px) {
  .sl-detail {
    grid-template-rows:minmax(100px,25%) minmax(0,1fr);
  }
  .sl-detail-image img {
    height:100%;
  }
  .sl-detail-image>span {
    display:none;
  }
  .sl-detail-info {
    padding:16px 20px 12px;
  }
  .sl-detail-info h2 {
    font-size:25px;
  }
}
.sl-filters {
  flex-wrap: wrap;
  min-width: 0;
  gap: 5px;
}
.sl-search {
  align-self: flex-start;
  flex-shrink: 0;
}
.sl-field-select {
  display: none;
}
@media (max-width: 640px) {
  .sl-filters {
    display: none;
  }
  .sl-field-select {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #72776d;
    font-size: 11px;
  }
  .sl-field-select select {
    flex: 1;
    min-width: 0;
    padding: 12px 9px;
    border: 1px solid #dedfd6;
    border-radius: 5px;
    background: #eef0e6;
    color: #34442d;
    font-size: 12px;
  }
  .sl-search {
    align-self: stretch;
  }
}
.sl-field-select select:focus-visible {
  outline: 3px solid #719c86;
  outline-offset: 3px;
}

.sl-purpose { color: #625e57; font-size: 13px; line-height: 1.65; margin: 16px 0; padding-left: 14px; border-left: 2px solid #d8d2c7; }
.sl-purpose strong { display: block; color: #292820; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

.sl-design-notes { color: #575d53; font-size: 12px; line-height: 1.65; margin: 12px 0 18px; }

/* Quiet popularity metadata, kept alongside the existing object details. */
.shape-lab .sl-download-count { color: #687460; font-size: 11px; margin-top: 5px; }
.sl-sort { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #747c70; }
.sl-sort select { font: inherit; color: #303c30; background: transparent; border: 1px solid #dddfd5; border-radius: 5px; padding: 7px 9px; max-width: 180px; }
.sl-sort select:disabled { opacity: .75; }
.sl-sort select:focus-visible { outline: 2px solid #7f9980; outline-offset: 2px; }
.sl-download-status { color: #89503e; font-size: 13px; margin: 0 0 18px; }
@media (max-width: 480px) {
  .sl-sort { gap: 5px; font-size: 11px; }
  .sl-sort select { max-width: 150px; }
}

.sl-result-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.sl-favorites-filter, .sl-favorite { border: 1px solid #dddfd5; background: transparent; color: #5b6855; cursor: pointer; font: inherit; border-radius: 6px; }
.sl-favorites-filter { padding: 8px 12px; font-size: 12px; min-height: 36px; }
.sl-card-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.sl-favorite { width: 36px; height: 36px; font-size: 23px; line-height: 1; border-radius: 50%; }
.sl-favorite[aria-pressed="true"], .sl-favorites-filter[aria-pressed="true"] { background: #e7ecdf; border-color: #a0ae92; color: #40553b; }
.sl-favorite:hover, .sl-favorites-filter:hover { border-color: #7f9980; }
.sl-favorite:focus-visible, .sl-favorites-filter:focus-visible { outline: 2px solid #7f9980; outline-offset: 3px; }
.sl-favorite.sl-favorite-detail { width: auto; height: auto; min-height: 40px; padding: 10px 14px; font-size: 13px; border-radius: 6px; margin: 0 0 15px; }
.sl-favorite-notice { font-size: 12px; color: #747c70; }
@media (max-width: 600px) {
  .sl-results { flex-wrap: wrap; gap: 12px; }
  .sl-result-controls { width: 100%; justify-content: space-between; gap: 8px; }
  .sl-favorite { width: 40px; height: 40px; }
  .shape-lab .sl-download { width: 40px; height: 40px; }
}

.sl-section-heading { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; border-top: 1px solid #dddfd5; padding-top: 28px; margin-top: 24px; scroll-margin-top: 24px; }
.sl-section-heading[hidden] { display: none; }
.sl-section-heading h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; margin: 0; color: #28312b; }
.sl-section-heading button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ccd3c4; background: transparent; color: #52634b; font-size: 23px; cursor: pointer; }
.sl-section-heading button:hover { background: #e7ecdf; }
.sl-section-heading button:focus-visible { outline: 2px solid #7f9980; outline-offset: 3px; }
.sl-section-heading:focus { outline: none; }

.sl-file-download-icon { display: block; flex-shrink: 0; }

/* Search sits below the field navigation at every viewport width. */
.sl-toolbar { flex-direction: column; }
.sl-search { position: relative; width: min(100%, 520px); padding: 0; border: 0; gap: 8px; }
.sl-search > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; color: #67615b; }
.sl-search input { flex: 1; min-width: 0; width: 100%; padding: 12px 14px 12px 46px; border: 1px solid #dedfd6; border-radius: 5px; font-size: 14px; }
.shape-lab .sl-search input:focus-visible { outline: none; }

.shape-lab .sl-search-submit { flex-shrink: 0; align-self: stretch; padding: 0 20px; border: 1px solid #303e32; border-radius: 5px; background: #303e32; color: #fff; font-size: 14px; font-weight: 550; }
.shape-lab .sl-search-submit:hover { background: #4d614a; }

.shape-lab .sl-collection-download {
  min-height: 72px;
  padding: 15px 20px;
  gap: 24px;
  border: 1px solid #3f5142;
  border-radius: 10px;
  box-shadow: 0 2px 3px #26372912;
}
.sl-collection-download .sl-collection-download-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
}
.sl-collection-download-copy strong { font-size: 14px; font-weight: 600; line-height: 1.3; }
.sl-collection-download-copy small { font-size: 11px; font-weight: 400; line-height: 1.4; color: #d5dfd0; }
.sl-collection-download .sl-file-download-icon {
  box-sizing: content-box;
  padding: 10px;
  background: #ffffff0d;
  border: 1px solid #ffffff26;
  border-radius: 8px;
}

.sl-close { display: grid; place-items: center; padding: 0; top: 0; right: 0; transform: translate(50%, -50%); }
.sl-close svg { display: block; }
.sl-card { contain: layout style; }
.shape-lab .sl-search-submit[aria-busy="true"] { display: flex; align-items: center; gap: 9px; cursor: progress; }
.sl-search-submit[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; flex-shrink: 0; border: 2px solid #ffffff55; border-top-color: #fff; border-radius: 50%; animation: sl-search-spin .8s linear infinite; }
@keyframes sl-search-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sl-search-submit[aria-busy="true"]::before { animation: none; } }
.sl-card-pending::before { content: ""; display: block; aspect-ratio: 1.06; background: #f1f0eb; border-radius: 7px; }
.sl-card-pending::after { content: ""; display: block; height: 125px; }
