body[data-public-showcase="true"] {
  --showcase-public-muted: rgba(237, 247, 241, .56);
  margin: 0;
  background: #07100f;
  color: #edf7f1;
  overflow-x: hidden;
}

body[data-public-showcase="true"]::before {
  content: "";
  position: fixed;
  inset: -20vh -15vw auto;
  height: 80vh;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 32%, rgba(91, 255, 201, .14), transparent 33%),
    radial-gradient(circle at 76% 12%, rgba(111, 157, 255, .15), transparent 31%),
    radial-gradient(circle at 58% 70%, rgba(183, 113, 255, .09), transparent 32%);
  filter: blur(24px);
}

.showcase-public-shell {
  position: relative;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #edf7f1;
}

.showcase-public-header,
.showcase-public-footer {
  width: min(1480px, calc(100% - 64px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.showcase-public-header {
  min-height: 86px;
  border-bottom: 1px solid rgba(224, 255, 240, .1);
}

.showcase-wordmark {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.showcase-wordmark span {
  display: grid;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: #07100f;
  background: #b9ffd9;
  font-weight: 800;
}

.showcase-wordmark strong { font-size: 15px; letter-spacing: .08em; }
.showcase-public-header nav { display: flex; gap: 28px; }
.showcase-public-header nav a,
.showcase-public-footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: rgba(237, 247, 241, .68);
  text-decoration: none;
  font-size: 13px;
}
.showcase-public-header nav a:hover,
.showcase-public-footer a:hover { color: #b9ffd9; }

.showcase-index,
.showcase-detail {
  width: min(1480px, calc(100% - 64px));
  margin: 0 auto;
  outline: none;
}

.showcase-index-intro {
  min-height: 430px;
  padding: 92px 0 62px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .7fr);
  align-content: end;
  column-gap: clamp(40px, 9vw, 150px);
}

.showcase-eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 18px;
  color: #8ae8c1;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .18em;
}

.showcase-index-intro h1,
.showcase-detail h1,
.showcase-public-missing h1 {
  margin: 0;
  max-width: 970px;
  font-size: clamp(48px, 7vw, 104px);
  font-weight: 530;
  line-height: .96;
  letter-spacing: -.065em;
}

.showcase-index-intro > p:not(.showcase-eyebrow) {
  align-self: end;
  margin: 0;
  color: rgba(237, 247, 241, .62);
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.7;
}

.showcase-kind-filter {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 54px;
}

.showcase-kind-filter a {
  min-height: 44px;
  padding: 9px 15px;
  display: inline-flex;
  align-items: center;
  color: rgba(237, 247, 241, .5);
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
}
.showcase-kind-filter a[aria-current="page"] { color: #06100d; background: #b9ffd9; }

.showcase-public-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 5vw, 82px);
  border-top: 1px solid rgba(224, 255, 240, .1);
}

.showcase-public-card {
  padding: clamp(36px, 5vw, 76px) 0;
  border-bottom: 1px solid rgba(224, 255, 240, .1);
}
.showcase-load-more {
  grid-column: 1 / -1;
  min-height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  border-bottom: 1px solid rgba(224, 255, 240, .1);
}
.showcase-load-more span { color: var(--showcase-public-muted); font-size: 11px; }
.showcase-public-card a { min-height: 44px; display: block; color: inherit; text-decoration: none; }
.showcase-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  background: rgba(255, 255, 255, .035);
}
.showcase-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease;
}
.showcase-public-card a:hover img { transform: scale(1.025); filter: saturate(1.08); }
.showcase-card-media > span {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #f2fff8;
  background: rgba(5, 14, 12, .58);
  backdrop-filter: blur(14px);
  font-size: 11px;
  letter-spacing: .12em;
}
.showcase-card-signal,
.showcase-detail-signal {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 40%, rgba(129,255,210,.23), transparent 28%),
    radial-gradient(circle at 68% 60%, rgba(129,159,255,.19), transparent 34%);
}
.showcase-card-signal i,
.showcase-detail-signal i {
  position: absolute;
  inset: 20%;
  border: 1px solid rgba(185, 255, 217, .22);
  border-radius: 50%;
  transform: rotate(28deg);
}
.showcase-card-signal i:nth-child(2), .showcase-detail-signal i:nth-child(2) { inset: 30% 10%; transform: rotate(-28deg); }
.showcase-card-signal i:nth-child(3), .showcase-detail-signal i:nth-child(3) { inset: 12% 36%; transform: rotate(72deg); }
.showcase-card-copy { padding: 24px 2px 0; }
.showcase-card-copy > p { margin: 0 0 12px; color: #8ae8c1; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.showcase-card-copy h2 { margin: 0; font-size: clamp(28px, 3vw, 46px); font-weight: 520; letter-spacing: -.045em; }
.showcase-card-copy > div { max-width: 720px; margin-top: 12px; color: rgba(237,247,241,.58); line-height: 1.65; }
.showcase-card-copy ul,
.showcase-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 22px 0 0; list-style: none; }
.showcase-card-copy li,
.showcase-detail-tags li { padding: 5px 9px; border: 1px solid rgba(224,255,240,.13); border-radius: 999px; color: rgba(237,247,241,.58); font-size: 11px; }

.showcase-public-loading,
.showcase-public-empty,
.showcase-public-missing {
  min-height: 55vh;
  display: grid;
  place-content: center;
  color: rgba(237,247,241,.62);
}
.showcase-public-empty { grid-column: 1 / -1; text-align: center; gap: 8px; }
.showcase-public-empty span { color: #edf7f1; font-size: 28px; }
.showcase-public-empty a,
.showcase-public-missing a { min-height: 44px; display: inline-flex; align-items: center; justify-self: center; color: #8ae8c1; }
.showcase-public-missing { justify-items: start; gap: 22px; }
.showcase-public-missing h1 { max-width: 900px; }
.showcase-public-missing .showcase-public-action { justify-self: start; }

.showcase-detail-hero {
  min-height: calc(100vh - 86px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  align-items: center;
  gap: clamp(42px, 7vw, 120px);
  padding: 72px 0;
}
.showcase-detail-copy { min-width: 0; }
.showcase-detail-back { min-height: 44px; display: inline-flex; align-items: center; margin-bottom: 66px; color: rgba(237,247,241,.48); text-decoration: none; font-size: 13px; }
.showcase-detail .showcase-eyebrow { margin-bottom: 20px; }
.showcase-detail h1 { font-size: clamp(48px, 6vw, 92px); }
.showcase-detail-summary { max-width: 820px; margin: 28px 0 0; color: rgba(237,247,241,.65); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.65; }
.showcase-detail-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 30px; color: var(--showcase-public-muted); font-size: 12px; }
.showcase-detail-cover,
.showcase-detail-signal { min-height: 520px; margin: 0; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.035); }
.showcase-detail-cover img { display: block; width: 100%; min-height: 520px; object-fit: cover; }
.showcase-detail-cover figcaption { padding: 10px 0; color: var(--showcase-public-muted); font-size: 11px; }
.showcase-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 34px; }
.showcase-public-action,
.showcase-detail-actions button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: #07100f;
  background: #b9ffd9;
  text-decoration: none;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}
.showcase-detail-actions button { color: rgba(237,247,241,.66); background: transparent; }

.showcase-highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(224,255,240,.1);
  border-bottom: 1px solid rgba(224,255,240,.1);
}
.showcase-highlights article { min-height: 180px; padding: 34px 32px 34px 0; }
.showcase-highlights article + article { padding-left: 32px; border-left: 1px solid rgba(224,255,240,.1); }
.showcase-highlights article:nth-child(4n+1) { padding-left: 0; border-left: 0; }
.showcase-highlights article:nth-child(n+5) { border-top: 1px solid rgba(224,255,240,.1); }
.showcase-highlights span { color: #8ae8c1; font-size: 11px; letter-spacing: .14em; }
.showcase-highlights p { margin: 38px 0 0; color: rgba(237,247,241,.78); line-height: 1.55; }
.showcase-detail-body { display: grid; grid-template-columns: 210px minmax(0, 820px); gap: clamp(32px, 8vw, 140px); padding: 110px 0; }
.showcase-body-marker { display: flex; flex-direction: column; gap: 8px; color: #8ae8c1; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.showcase-body-marker small { color: var(--showcase-public-muted); }
.showcase-detail-body .rich-content { color: rgba(237,247,241,.78); font-size: 17px; line-height: 1.8; }
.showcase-detail-body .rich-content h2,
.showcase-detail-body .rich-content h3 { color: #edf7f1; letter-spacing: -.025em; }
.showcase-detail-body .rich-content a { color: #8ae8c1; }
.showcase-detail-body .rich-content pre,
.showcase-detail-body .rich-content table { background: rgba(255,255,255,.035); }
.showcase-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 0 0 110px; }
.showcase-gallery figure { margin: 0; }
.showcase-gallery img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
.showcase-gallery figcaption { margin-top: 10px; color: var(--showcase-public-muted); font-size: 12px; }
.showcase-detail-footer,
.showcase-public-footer { min-height: 112px; border-top: 1px solid rgba(224,255,240,.1); color: var(--showcase-public-muted); font-size: 12px; }
.showcase-detail-footer { display: flex; align-items: center; justify-content: space-between; }
.showcase-detail-footer div { display: flex; gap: 24px; }
.showcase-detail-footer a { color: #8ae8c1; text-decoration: none; }

/* Authenticated project publication workspace: flat, editorial and low-chrome. */
.showcase-workspace { color: var(--text, #14201c); }
.showcase-workspace-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  padding: 18px 0 28px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.showcase-workspace-intro > div:first-child p { margin: 0 0 8px; color: var(--accent, #14765c); font-size: 10px; font-weight: 750; letter-spacing: .15em; }
.showcase-workspace-intro h2 { margin: 0; font-size: clamp(30px, 4vw, 52px); font-weight: 560; letter-spacing: -.045em; }
.showcase-workspace-intro > div:first-child span { display: block; margin-top: 8px; color: var(--muted, #66756f); }
.showcase-workspace-intro > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; }
.showcase-workspace-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 720px; }
.showcase-draft-list { padding: 24px 22px 40px 0; border-right: 1px solid color-mix(in srgb, currentColor 9%, transparent); }
.showcase-draft-list > div:first-child { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.showcase-draft-list small { color: var(--muted, #708078); font-size: 11px; line-height: 1.4; }
.showcase-draft-item { width: 100%; padding: 14px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.showcase-draft-item:hover { background: color-mix(in srgb, var(--accent, #16775e) 5%, transparent); }
.showcase-draft-item.active { background: color-mix(in srgb, var(--accent, #16775e) 9%, transparent); }
.showcase-draft-item > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.showcase-draft-item i { color: var(--accent, #16775e); font-style: normal; font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.showcase-draft-item strong { display: block; margin: 9px 0 5px; font-size: 14px; }
.showcase-draft-item > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showcase-state { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-size: 10px; font-style: normal; }
.showcase-state-published { color: #096448; background: rgba(45, 196, 140, .12); }
.showcase-state-changed { color: #6b4f08; background: rgba(229, 178, 42, .14); }
.showcase-state-withdrawn, .showcase-state-draft { color: #65716c; background: rgba(90, 110, 101, .1); }
.showcase-state-blocked { color: #a02626; background: rgba(210, 62, 62, .12); }
.showcase-draft-empty,
.showcase-editor-empty { color: var(--muted, #687770); line-height: 1.6; }
.showcase-editor-empty { display: grid; min-height: 560px; place-content: center; text-align: center; }
.showcase-editor-empty span { color: inherit; font-size: 24px; }
.showcase-editor { min-width: 0; padding: 26px 0 60px 34px; }
.showcase-editor-heading { display: flex; justify-content: space-between; gap: 24px; align-items: start; }
.showcase-editor-heading p { margin: 0 0 6px; color: var(--accent, #16775e); font-size: 11px; letter-spacing: .08em; }
.showcase-editor-heading h2 { margin: 0; font-size: 28px; font-weight: 570; letter-spacing: -.035em; }
.showcase-editor-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; }
.showcase-editor-state { display: flex; align-items: center; gap: 10px; margin: 14px 0 32px; color: var(--muted, #687770); font-size: 11px; }
.showcase-editor-state small { margin-left: auto; }
.showcase-editor-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr); gap: 36px; }
.showcase-editor-core { display: grid; gap: 18px; }
.showcase-editor-form label { display: grid; gap: 7px; color: var(--muted, #687770); font-size: 12px; }
.showcase-editor-form label > span small { opacity: .7; }
.showcase-editor-form input,
.showcase-editor-form textarea,
.showcase-editor-form select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  border-radius: 0;
  padding: 10px 2px;
  background: transparent;
  color: var(--text, #14201c);
  font: inherit;
  font-size: 14px;
  resize: vertical;
}
.showcase-editor-form input:focus,
.showcase-editor-form textarea:focus,
.showcase-editor-form select:focus { outline: 0; border-color: var(--accent, #16775e); box-shadow: 0 1px 0 var(--accent, #16775e); }
.showcase-two-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.showcase-slug-input { display: flex; align-items: center; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.showcase-slug-input b { color: var(--muted, #687770); font-size: 12px; font-weight: 500; }
.showcase-slug-input input { border: 0; }
.showcase-editor-preview { min-height: 470px; padding: 18px 0 18px 30px; border-left: 1px solid color-mix(in srgb, currentColor 9%, transparent); }
.showcase-editor-preview > div:first-child { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 24px; color: var(--muted, #687770); font-size: 11px; }
.showcase-editor-preview .rich-content { font-size: 14px; }
.showcase-editor-section { grid-column: 1 / -1; border-top: 1px solid color-mix(in srgb, currentColor 9%, transparent); padding: 18px 0 4px; }
.showcase-editor-section summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.showcase-editor-section summary::-webkit-details-marker { display: none; }
.showcase-editor-section summary span { font-weight: 650; }
.showcase-editor-section summary small { color: var(--muted, #687770); }
.showcase-editor-section > div { margin-top: 22px; }
.showcase-media-picker { display: grid; }
.showcase-media-row { display: grid; grid-template-columns: minmax(220px, 1fr) 72px minmax(160px, .65fr) minmax(160px, .65fr); gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 7%, transparent); }
.showcase-media-check { grid-template-columns: auto 1fr !important; align-items: center; }
.showcase-media-check input,
.showcase-cover-choice input,
.showcase-confirm input { width: auto; }
.showcase-media-check span { min-width: 0; }
.showcase-media-check strong,
.showcase-media-check small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showcase-cover-choice { display: flex !important; grid-template-columns: auto 1fr !important; align-items: center; }
.showcase-media-empty { color: var(--muted, #687770); }
.showcase-savebar { grid-column: 1 / -1; position: sticky; bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--surface, #f6faf8) 86%, transparent); box-shadow: 0 12px 34px rgba(20, 35, 28, .08); backdrop-filter: blur(22px); }
.showcase-savebar div { display: flex; flex-direction: column; gap: 2px; }
.showcase-savebar span { color: var(--muted, #687770); font-size: 11px; }
.showcase-publish-summary { display: grid; gap: 5px; padding: 12px 0 18px; }
.showcase-publish-summary span { color: var(--accent, #16775e); font-size: 11px; }
.showcase-publish-summary p { margin: 4px 0; color: var(--muted, #687770); line-height: 1.55; }
.showcase-editor-form :disabled { cursor: not-allowed; opacity: .68; }
.showcase-confirm { grid-template-columns: auto 1fr !important; align-items: start; }

@media (max-width: 980px) {
  .showcase-index-intro { grid-template-columns: 1fr; min-height: auto; padding-top: 72px; }
  .showcase-index-intro > p:not(.showcase-eyebrow) { margin-top: 30px; max-width: 650px; }
  .showcase-detail-hero { grid-template-columns: 1fr; }
  .showcase-detail-cover, .showcase-detail-signal, .showcase-detail-cover img { min-height: 360px; }
  .showcase-highlights { grid-template-columns: repeat(2, 1fr); }
  .showcase-highlights article:nth-child(odd) { padding-left: 0; border-left: 0; }
  .showcase-highlights article:nth-child(n+3) { border-top: 1px solid rgba(224,255,240,.1); }
  .showcase-workspace-layout { grid-template-columns: 1fr; }
  .showcase-draft-list { display: flex; gap: 8px; overflow-x: auto; padding: 18px 0; border-right: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 9%, transparent); }
  .showcase-draft-list > div:first-child { min-width: 170px; }
  .showcase-draft-item { min-width: 210px; }
  .showcase-editor { padding-left: 0; }
  .showcase-editor-form { grid-template-columns: 1fr; }
  .showcase-editor-preview { min-height: 320px; padding: 26px 0 0; border-left: 0; border-top: 1px solid color-mix(in srgb, currentColor 9%, transparent); }
}

@media (max-width: 700px) {
  .showcase-public-header,
  .showcase-public-footer,
  .showcase-index,
  .showcase-detail { width: min(100% - 32px, 1480px); }
  .showcase-public-header { min-height: 68px; }
  .showcase-public-header nav a:first-child { display: none; }
  .showcase-index-intro { padding: 58px 0 40px; }
  .showcase-index-intro h1, .showcase-detail h1, .showcase-public-missing h1 { max-width: 11ch; font-size: clamp(38px, 11.5vw, 58px); line-height: 1.02; text-wrap: balance; }
  .showcase-public-grid { grid-template-columns: 1fr; }
  .showcase-detail-hero { min-height: auto; padding: 48px 0 72px; }
  .showcase-detail-back { margin-bottom: 46px; }
  .showcase-detail-cover, .showcase-detail-signal, .showcase-detail-cover img { min-height: 280px; }
  .showcase-highlights { grid-template-columns: 1fr; }
  .showcase-highlights article + article { padding-left: 0; border-left: 0; border-top: 1px solid rgba(224,255,240,.1); }
  .showcase-detail-body { grid-template-columns: 1fr; padding: 72px 0; }
  .showcase-gallery { grid-template-columns: 1fr; }
  .showcase-detail-footer { align-items: start; flex-direction: column; justify-content: center; gap: 14px; }
  .showcase-detail-footer div { flex-wrap: wrap; }
  .showcase-workspace-intro, .showcase-editor-heading { align-items: stretch; flex-direction: column; }
  .showcase-workspace-intro > div:last-child, .showcase-editor-actions { justify-content: start; }
  .showcase-two-fields { grid-template-columns: 1fr; }
  .showcase-media-row { grid-template-columns: 1fr auto; }
  .showcase-media-row > input { grid-column: 1 / -1; }
  .showcase-savebar { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-card-media img { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  body[data-public-showcase="true"]::before { display: none; }
  .showcase-card-media > span,
  .showcase-savebar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .showcase-card-media > span { background: #17231f; }
  .showcase-savebar { background: var(--surface, #f6faf8); }
}