/* ── mobile preview (ported from Hariel Store) ───────── */
.mpvtab { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 120; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 11px 7px; border: 1px solid rgba(var(--c1), .3); border-left: none; border-radius: 0 12px 12px 0; background: rgb(var(--c0)); color: rgb(var(--c1)); font-family: inherit; cursor: pointer; opacity: .78; box-shadow: 0 10px 30px -18px rgba(0,0,0,.45); transition: opacity .3s cubic-bezier(.32,.72,0,1), padding .3s cubic-bezier(.32,.72,0,1); }
.mpvtab:hover, .mpvtab:focus-visible { opacity: 1; padding-left: 10px; }
.mpvtab:focus-visible { outline: 2px solid rgb(var(--c1)); outline-offset: 2px; }
.mpvtab__t { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; font-weight: 800; }
@media (max-width: 900px) { .mpvtab { display: none; } }
.mpvovl { position: fixed; inset: 0; z-index: 400; background: rgb(var(--c8)); display: flex; flex-direction: column; align-items: center; padding: 0; }
.mpvbox { width: 402px; max-width: 100%; flex: 1; min-height: 0; background: rgb(var(--c0)); border-inline: 1px solid rgb(var(--c7)); box-shadow: 0 40px 80px -50px rgba(0,0,0,.5); overflow: hidden; }
.mpvbox iframe { width: 100%; height: 100%; border: none; display: block; background: rgb(var(--c0)); }
.mpvx { position: fixed; top: 14px; inset-inline-end: 16px; z-index: 3; font-family: inherit; font-weight: 800; font-size: 12.5px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgb(var(--c7)); background: rgb(var(--c0)); color: rgb(var(--c5)); cursor: pointer; box-shadow: 0 14px 30px -20px rgba(0,0,0,.6); }
.mpvx:hover { border-color: rgb(var(--c5)); }