.otd-story-share-layer{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(10,10,16,.52);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.otd-story-share-layer[hidden],
.otd-story-share-layer[aria-hidden="true"]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.otd-story-share-layer.is-open:not([hidden]){
  display:flex;
  visibility:visible;
  pointer-events:auto;
}
.otd-story-share-modal{
  width:min(1080px,100%);
  max-height:min(90vh,980px);
  overflow:auto;
  border-radius:32px;
  padding:28px;
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 32px 90px rgba(4,7,22,.28), inset 0 1px 0 rgba(255,255,255,.26);
}
.otd-story-share-content{display:grid;grid-template-columns:minmax(320px,400px) minmax(320px,1fr);gap:32px;align-items:center}
.otd-story-share-close{
  position:absolute;right:18px;top:18px;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);color:#111;font-size:28px;line-height:1;cursor:pointer;
}
.otd-story-phone-frame{
  background:#181818;
  border-radius:34px;
  padding:18px 18px 20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.otd-story-preview{
  aspect-ratio:9/16;
  border-radius:30px;
  padding:18px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:26px;
  background:#113b5a;
}
.otd-story-preview__topbar{
  width:72px;height:7px;border-radius:999px;background:rgba(255,255,255,.7);margin:0 auto;
}
.otd-story-card{
  width:100%;
  margin-top:18px;
  background:#02111f;
  border-radius:20px;
  padding:14px;
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}
.otd-story-card__image{
  width:100%;
  aspect-ratio:1/1;
  border-radius:14px;
  background:#113b5a center/cover no-repeat;
}
.otd-story-card__body{padding:14px 4px 4px;color:#fff}
.otd-story-card__body h3{margin:0 0 6px;font-size:42px;line-height:1.06;letter-spacing:-.03em;color:#fff}
.otd-story-card__handle,.otd-story-card__meta{margin:0;color:rgba(255,255,255,.84);font-size:18px;line-height:1.35}
.otd-story-card__meta{margin-top:10px;min-height:48px}
.otd-story-card__brand{margin-top:22px;font-size:18px;font-weight:700;letter-spacing:-.02em;color:#fff}
.otd-story-preview__cta{margin-top:auto;text-align:center;color:#fff;font-size:18px;font-weight:600;opacity:.92}
.otd-story-swatches{display:flex;justify-content:center;gap:16px;padding-top:18px;flex-wrap:wrap}
.otd-story-swatch,.otd-story-randomize{
  width:56px;height:56px;border-radius:999px;border:3px solid rgba(255,255,255,.4);cursor:pointer;background:var(--swatch-color);
  box-shadow:0 6px 14px rgba(0,0,0,.16);position:relative;
}
.otd-story-swatch.is-active{border-color:#fff;transform:scale(1.06)}
.otd-story-randomize{background:#121212;display:grid;place-items:center;color:#fff;font-size:22px}
.otd-story-share-kicker{display:inline-block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#5e6470;margin-bottom:12px}
.otd-story-share-panel h2{font-size:52px;line-height:.98;letter-spacing:-.05em;margin:0 0 14px;color:#101114}
.otd-story-share-copy{font-size:19px;line-height:1.55;color:#525966;max-width:60ch;margin:0 0 18px}
.otd-story-share-points{margin:0 0 22px;padding-left:18px;color:#353942;display:grid;gap:10px}
.otd-story-share-actions{display:flex;flex-wrap:wrap;gap:12px}
.otd-story-share-note{margin:16px 0 0;color:#6a707d;line-height:1.5;font-size:14px}
body.otd-story-share-open{overflow:hidden}
.otd-story-share-trigger-added{display:inline-flex;align-items:center;gap:10px}
.otd-story-share-trigger-added svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
@media (max-width: 900px){
  .otd-story-share-modal{padding:22px}
  .otd-story-share-content{grid-template-columns:1fr;gap:20px}
  .otd-story-share-panel h2{font-size:38px}
  .otd-story-card__body h3{font-size:36px}
}
@media (max-width: 640px){
  .otd-story-share-layer{padding:12px}
  .otd-story-share-modal{border-radius:24px;padding:18px;max-height:95vh}
  .otd-story-phone-frame{padding:12px;border-radius:26px}
  .otd-story-preview{padding:14px;border-radius:24px}
  .otd-story-card__body h3{font-size:28px}
  .otd-story-card__handle,.otd-story-card__meta,.otd-story-preview__cta{font-size:15px}
  .otd-story-share-panel h2{font-size:30px}
  .otd-story-share-copy{font-size:16px}
  .otd-story-swatch,.otd-story-randomize{width:48px;height:48px}
}