/* === WIDGET: streaming | scope .vr-streaming ============================== */
@layer widgets {
  .vr-streaming__visual { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
  .vr-streaming__art { position: relative; width: 295px; max-width: 100%; height: 190px; }
  .vr-streaming__globe { position: absolute; width: 165px; height: 165px; right: 0; top: 0; color: #b7a4ff; }
  .vr-streaming__globe > .vr-icon { width: 100%; height: 100%; stroke-width: .65; }
  .vr-streaming__globe i { position: absolute; background: var(--vr-brand); width: 15px; height: 19px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); left: 43px; top: 25px; }
  .vr-streaming__globe i::after { content: ""; position: absolute; width: 5px; height: 5px; background: white; border-radius: 50%; top: 6px; left: 5px; }
  .vr-streaming__globe i:nth-of-type(2) { top: 75px; left: 125px; }
  .vr-streaming__globe i:nth-of-type(3) { top: 112px; left: 61px; }
  .vr-streaming__screen { position: absolute; width: 180px; height: 110px; left: 8px; bottom: 20px; border: 3px solid var(--vr-brand); border-radius: 9px; background: white; display: grid; place-items: center; }
  .vr-streaming__screen::after { content: ""; position: absolute; bottom: -13px; left: -15px; width: calc(100% + 30px); height: 11px; border: 3px solid var(--vr-brand); border-radius: 0 0 10px 10px; background: white; }
  .vr-streaming__screen span { font-size: 32px; color: var(--vr-brand); }
  .vr-streaming__tags { display: flex; gap: 14px; align-items: center; margin-top: 10px; font-weight: 650; font-size: var(--vr-text-sm); }
  .vr-streaming__tags b { color: var(--vr-border); }
  .vr-streaming__visual > p { font-size: var(--vr-text-xs); }
  .vr-streaming__note { margin-top: 20px; }
}
/* === END WIDGET: streaming =============================================== */