/* layout: the share sheet (component.shareSheet, Round 14). A small night-rose pane: the looping preview on top
   (reel, story, link, 3 s each, one body in motion), six ways out as soft pills, the reaction line, and one big
   close button at the bottom. Theme numbers come from the house tokens; the pane follows the site's theme */
.rw-sheet{border:0;padding:0;background:transparent;max-width:min(420px,calc(100vw - 32px));width:100%;color:var(--rw-ink,#2a0d18)}
.rw-sheet::backdrop{background:color-mix(in srgb,#14070c 55%,transparent);backdrop-filter:blur(3px)}
.rw-sheet__pane{display:grid;gap:14px;padding:18px 18px 16px;border-radius:22px;
  background:var(--rw-paper,#fffafb);box-shadow:0 24px 60px -12px rgba(40,8,20,.5),0 0 0 1px color-mix(in srgb,var(--rose,#e2384f) 18%,transparent)}
:root[data-rw-theme="dark"] .rw-sheet__pane{background:#1c0f15;color:#f6eef1}
.rw-sheet__title{margin:0;font:700 20px/1.1 var(--f-display,serif);text-align:center}

/* the loop: three phone-sized frames stacked, each lit in turn */
.rw-sheet__loop{position:relative;height:250px;container-type:inline-size}
.rw-sheet__frame{position:absolute;inset:0;display:grid;justify-items:center;gap:6px;opacity:0;animation:rw-sheet-loop 9s infinite}
.rw-sheet__frame--1{animation-delay:3s}.rw-sheet__frame--2{animation-delay:6s}
@keyframes rw-sheet-loop{0%{opacity:0;transform:translateY(8px) scale(.97)}5%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-6px) scale(.98)}}
.rw-sheet__screen{position:relative;width:126px;height:224px;border-radius:16px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--rose,#e2384f) 45%,#2a0d18),#14070c 75%);box-shadow:0 10px 24px -8px rgba(40,8,20,.55)}
.rw-sheet__screen--chat{width:200px;background:linear-gradient(#f3eef0,#e9e1e5);place-items:end start;padding:12px}
.rw-sheet__card{width:96px;pointer-events:none;transform:rotate(-3deg)}
.rw-sheet__frame--1 .rw-sheet__card{transform:rotate(4deg) scale(.92)}
.rw-sheet__face{position:relative;inset:auto;transform:none}
.rw-sheet__blank{width:96px;aspect-ratio:5/7;border-radius:10px;background:color-mix(in srgb,var(--rose,#e2384f) 40%,#fff)}
.rw-sheet__cap{position:absolute;left:8px;right:8px;bottom:10px;font:600 9px/1.3 var(--f-body,sans-serif);color:#fff;text-shadow:0 1px 3px #000}
.rw-sheet__sticker{position:absolute;top:14px;left:50%;translate:-50% 0;padding:3px 8px;border-radius:8px;background:#fff;color:#b0203a;font:700 9px var(--f-data,monospace);white-space:nowrap}
.rw-sheet__bubble{width:100%;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.12);display:grid}
.rw-sheet__og{height:88px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle,color-mix(in srgb,var(--rose,#e2384f) 40%,#2a0d18),#14070c)}
.rw-sheet__og .rw-sheet__card{width:56px}
.rw-sheet__og-title{padding:6px 10px 0;font:700 11px var(--f-display,serif);color:#2a0d18}
.rw-sheet__og-host{padding:0 10px 8px;font:10px var(--f-data,monospace);color:#86606f}
.rw-sheet__label{font:600 11px var(--f-data,monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--rose,#e2384f)}

/* the six ways */
.rw-sheet__ways{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rw-sheet__way{justify-content:center;width:100%}

/* the reaction: a line of rose that blooms once */
.rw-sheet__react{margin:0;min-height:1.4em;text-align:center;font:italic 15px var(--f-display,serif);color:var(--rose-deep,#b0203a);opacity:0}
.rw-sheet__react.is-on{animation:rw-sheet-react 3.6s ease-out forwards}
@keyframes rw-sheet-react{0%{opacity:0;transform:translateY(6px);letter-spacing:.06em}12%{opacity:1;transform:none;letter-spacing:0}80%{opacity:1}100%{opacity:.55}}
:root[data-rw-theme="dark"] .rw-sheet__react{color:#f4a6b6}
.rw-sheet__url{width:100%;font:12px var(--f-data,monospace);padding:8px;border-radius:8px;border:1px solid color-mix(in srgb,var(--rose,#e2384f) 30%,transparent)}

/* the big close */
.rw-sheet__close{width:100%;justify-content:center;padding:14px;border-radius:14px;font:700 16px var(--f-display,serif);
  background:var(--rose,#e2384f);color:#fff;border:0;cursor:pointer}
.rw-sheet__close:hover{filter:brightness(1.08)}
@media (prefers-reduced-motion:reduce){.rw-sheet__frame{animation:none}.rw-sheet__frame--0{opacity:1}.rw-sheet__react.is-on{animation:none;opacity:1}}