/* Demo-only layout for the GSAP shelf (gallery + demo pages). Not part of any effect. */
.rp{font:600 15px/1 var(--bf);padding:12px 16px;min-height:44px;border-radius:99px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.tg{font-size:14.5px;line-height:1.5;padding:10px 12px;border-radius:6px;margin:10px 0 8px;max-width:72ch}
.tg b{display:block;font-size:15px;margin-bottom:2px}
.tg-ok{background:#e4f1e7;color:#1f4d2e;border:1px solid #b8d9c1}
.tg-no{background:#fbe6e1;color:#7a2413;border:1px solid #efc0b4}
/* phone frame for page-level effects */
.fx-frame{display:flex;flex-direction:column;align-items:center;gap:10px}
.fx-frame-ph{width:min(100%,340px);height:540px;border:8px solid #1d2430;border-radius:28px;overflow:hidden;background:var(--bg);box-shadow:0 20px 40px -24px rgba(29,36,48,.5)}
.fx-frame iframe{display:block;width:100%;height:100%;border:0}
.fx-frame:not(.is-live) iframe{pointer-events:none}
.fx-frame.is-live .fx-frame-ph{border-color:var(--a)}
.fx-frame-act{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;margin:0;font-size:15px}
.fx-frame-act a{font-weight:600}
.fx-frame-live{font:600 14.5px/1 var(--bf);padding:11px 14px;min-height:44px;border-radius:99px;border:1px solid var(--ink);background:var(--card);color:var(--ink);cursor:pointer}
.fx-frame-live[aria-pressed=true]{background:var(--a);border-color:var(--a)}