/* Preset share pages (/p/<id>/, /p/#…), on top of landing.css. */
.share {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);
  gap:40px;
  align-items:center;
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:48px 0 72px;
  min-height:calc(100svh - 220px);
}
.pricing-only main.share {
  padding-top:48px;
}
.share--custom {
  grid-template-columns:minmax(0,720px);
  justify-content:center;
}
.share-stage {
  position:relative;
  aspect-ratio:1200/630;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:#000;
  box-shadow:0 30px 80px rgb(0 0 0 / .45);
}
.share-poster {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .6s var(--ease-out);
}
.share-live {
  position:absolute;
  inset:0;
}
.share-live .live-surface {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  opacity:0;
  transition:opacity .6s var(--ease-out);
}
.share-stage[data-state=live] .live-surface.is-active {
  opacity:1;
}
.share-stage[data-state=live] .share-poster {
  opacity:0;
}
.share-stage__tools {
  position:absolute;
  inset:auto 12px 12px auto;
  display:flex;
  gap:8px;
  z-index:2;
}
.share-chip {
  border:1px solid rgb(var(--fg-rgb) / .22);
  border-radius:999px;
  padding:7px 13px;
  background:rgb(var(--bg-rgb) / .72);
  color:var(--white);
  font:600 13px var(--font);
  cursor:pointer;
  backdrop-filter:blur(8px);
}
.share-chip:hover {
  border-color:var(--lilac);
}
.share-info h1 {
  font:400 clamp(34px,4.4vw,56px)/1.05 var(--display);
  letter-spacing:-.03em;
  margin:6px 0 14px;
  overflow-wrap:anywhere;
}
.share-description {
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 83%,rgb(var(--bg-rgb)));
  font-size:16px;
  line-height:1.55;
  margin:0 0 26px;
}
.share-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.share-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  border:1px solid rgb(var(--fg-rgb) / .28);
  border-radius:999px;
  background:transparent;
  color:var(--white);
  font:600 15px var(--font);
  text-decoration:none;
  cursor:pointer;
}
.share-button:hover {
  border-color:var(--lilac);
}
.share-button--primary,
.share-page:not(.has-deus) [data-share-install] {
  border-color:var(--solid);
  background:var(--solid);
  color:var(--on-accent);
}
.share-button:disabled {
  opacity:.6;
  cursor:progress;
}
.share-status {
  min-height:1.4em;
  margin:14px 0 0;
  color:var(--lilac);
  font-size:14px;
}
.share-status--error {
  color:#ff9aa6;
}
.share-note {
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}
.has-deus [data-share-note] {
  display:none;
}
.share-more {
  margin:22px 0 0;
  font-size:14px;
}
.share-more a {
  color:var(--lilac);
}
.share-code {
  margin-top:26px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 14px;
}
.share-code summary {
  cursor:pointer;
  font-weight:600;
}
.share-code pre {
  max-height:420px;
  overflow:auto;
  margin:12px 0 0;
  font-size:12px;
  line-height:1.5;
  direction:ltr;
  text-align:left;
}
/* scripts/render-share-posters.cjs: the stage alone, at the poster's size. */
.share-poster-mode body {
  overflow:hidden;
}
.share-poster-mode .share-stage {
  position:fixed;
  inset:0;
  z-index:100;
  border:0;
  border-radius:0;
  aspect-ratio:auto;
}
.share-poster-mode .share-stage__tools,
.share-poster-mode .share-poster {
  display:none;
}
@media (max-width:860px) {
  .share {
    grid-template-columns:minmax(0,1fr);
    gap:26px;
    padding-top:24px;
  }
  .pricing-only main.share {
    padding-top:24px;
  }
}