:root{
  --cf-wx-ink:#0b0f1c;
  --cf-wx-panel:#121a2f;
  --cf-wx-panel-2:#0e1526;
  --cf-wx-accent:#d9a94e;
  --cf-wx-text:#ece7da;
  --cf-wx-muted:#a9a696;
  --cf-wx-secondary:#8fb8c4;
  --cf-wx-radius:8px;
}
body.cf-wx-share-open{overflow:hidden}
.cf-wx-share-trigger{
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 1rem);
  right:calc(env(safe-area-inset-right,0px) + 1rem);
  z-index:1000;
  min-height:44px;
  padding:.62rem 1rem;
  border:1px solid color-mix(in srgb,var(--gold,var(--cf-wx-accent)) 52%,transparent);
  border-radius:var(--cf-wx-radius);
  background:color-mix(in srgb,var(--ink,var(--cf-wx-ink)) 86%,transparent);
  color:var(--moon,var(--cf-wx-text));
  font:500 .82rem/1.25 inherit;
  letter-spacing:.12em;
  white-space:nowrap;
  cursor:pointer;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:border-color .2s,color .2s,background .2s,transform .15s;
}
.cf-wx-share-trigger:hover,
.cf-wx-share-trigger:focus-visible{
  border-color:var(--gold,var(--cf-wx-accent));
  color:var(--gold,var(--cf-wx-accent));
}
.cf-wx-share-trigger:active{transform:translateY(1px)}
.cf-wx-share-trigger:focus-visible,
.cf-wx-share-close:focus-visible,
.cf-wx-share-action:focus-visible{
  outline:2px solid var(--gold,var(--cf-wx-accent));
  outline-offset:3px;
}
.cf-wx-share-dialog[hidden]{display:none!important}
.cf-wx-share-dialog{
  position:fixed;
  inset:0;
  z-index:1001;
  display:grid;
  place-items:center;
  padding:1rem;
  background:rgba(5,8,16,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.cf-wx-share-panel{
  width:min(520px,100%);
  max-height:calc(100dvh - 2rem);
  overflow:auto;
  position:relative;
  border:1px solid color-mix(in srgb,var(--gold,var(--cf-wx-accent)) 30%,transparent);
  border-radius:var(--cf-wx-radius);
  background:linear-gradient(
    160deg,
    var(--panel,var(--cf-wx-panel)),
    var(--panel2,var(--cf-wx-panel-2))
  );
  color:var(--moon,var(--cf-wx-text));
  box-shadow:0 24px 80px rgba(2,5,12,.62);
  padding:1.5rem;
}
.cf-wx-share-close{
  position:absolute;
  top:.9rem;
  right:.9rem;
  min-width:44px;
  min-height:40px;
  border:1px solid rgba(236,231,218,.18);
  border-radius:calc(var(--cf-wx-radius) - 2px);
  background:transparent;
  color:var(--moon-dim,var(--cf-wx-muted));
  font:500 .76rem/1 inherit;
  letter-spacing:.08em;
  cursor:pointer;
}
.cf-wx-share-close:hover{
  border-color:var(--gold,var(--cf-wx-accent));
  color:var(--gold,var(--cf-wx-accent));
}
.cf-wx-share-kicker{
  margin-bottom:.5rem;
  color:var(--gold,var(--cf-wx-accent));
  font-size:.73rem;
  letter-spacing:.26em;
}
.cf-wx-share-title{
  margin:0;
  padding-right:4rem;
  color:var(--moon,var(--cf-wx-text));
  font:600 1.45rem/1.5 inherit;
  letter-spacing:.04em;
}
.cf-wx-share-intro,
.cf-wx-share-note{
  color:var(--moon-dim,var(--cf-wx-muted));
  font-size:.86rem;
  line-height:1.75;
}
.cf-wx-share-intro{margin:.45rem 0 1rem}
.cf-wx-share-note{margin:1rem 0 0}
.cf-wx-share-card{
  overflow:hidden;
  border:1px solid rgba(236,231,218,.12);
  border-radius:calc(var(--cf-wx-radius) - 2px);
  background:var(--ink,var(--cf-wx-ink));
}
.cf-wx-share-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1200/630;
  object-fit:cover;
}
.cf-wx-share-card-copy{padding:.8rem .9rem .9rem}
.cf-wx-share-card-copy strong{
  display:block;
  color:var(--moon,var(--cf-wx-text));
  font-size:.98rem;
  font-weight:600;
}
.cf-wx-share-card-copy span{
  display:block;
  margin-top:.2rem;
  color:var(--moon-dim,var(--cf-wx-muted));
  font-size:.75rem;
}
.cf-wx-share-guide{
  margin-top:1rem;
  border-left:2px solid var(--gold,var(--cf-wx-accent));
  padding:.72rem 0 .72rem 1rem;
  color:var(--moon,var(--cf-wx-text));
  font-size:.86rem;
  line-height:1.75;
}
.cf-wx-share-guide strong{
  color:var(--gold,var(--cf-wx-accent));
  font-weight:500;
}
.cf-wx-share-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
  margin-top:1rem;
}
.cf-wx-share-action{
  min-height:44px;
  border:1px solid color-mix(in srgb,var(--mist,var(--cf-wx-secondary)) 45%,transparent);
  border-radius:calc(var(--cf-wx-radius) - 2px);
  background:transparent;
  color:var(--mist,var(--cf-wx-secondary));
  font:500 .83rem/1.25 inherit;
  letter-spacing:.05em;
  cursor:pointer;
  transition:border-color .2s,color .2s,background .2s,transform .15s;
}
.cf-wx-share-action:hover{
  border-color:var(--gold,var(--cf-wx-accent));
  color:var(--gold,var(--cf-wx-accent));
}
.cf-wx-share-action:active{transform:translateY(1px)}
.cf-wx-share-action.cf-wx-primary{
  border-color:var(--gold,var(--cf-wx-accent));
  background:var(--gold,var(--cf-wx-accent));
  color:var(--ink,var(--cf-wx-ink));
}
.cf-wx-share-status{
  min-height:1.5rem;
  margin-top:.65rem;
  color:var(--gold,var(--cf-wx-accent));
  font-size:.78rem;
  text-align:center;
}
@media(max-width:520px){
  .cf-wx-share-trigger{
    top:calc(env(safe-area-inset-top,0px) + .8rem);
    right:calc(env(safe-area-inset-right,0px) + .8rem);
  }
  .cf-wx-share-panel{padding:1.25rem}
  .cf-wx-share-actions{grid-template-columns:1fr}
}
@media(prefers-reduced-transparency:reduce){
  .cf-wx-share-trigger{
    background:var(--ink,var(--cf-wx-ink));
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .cf-wx-share-dialog{
    background:rgba(5,8,16,.96);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
@supports not (color:color-mix(in srgb,#000 50%,transparent)){
  .cf-wx-share-trigger{border-color:rgba(217,169,78,.52)}
  .cf-wx-share-panel{border-color:rgba(217,169,78,.3)}
  .cf-wx-share-action{border-color:rgba(143,184,196,.45)}
}