/* generated by site/examples/build.mjs */
.yt-tray{position:fixed;right:24px;bottom:24px;z-index:2147482000;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  font:500 13px/1.4 Inter,system-ui,sans-serif}
.yt-tray-toggle{padding:11px 18px;border:0;border-radius:999px;background:#17191d;color:#f4f2ec;
  font:inherit;font-weight:600;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.yt-tray-toggle:hover{background:#23262c}
.yt-tray-panel{width:270px;background:#17191d;color:#e8e3da;border-radius:14px;padding:14px;
  display:grid;gap:6px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
/* WITHOUT THIS THE PANEL IS ALWAYS OPEN. The hidden attribute is display:none
   in the UA stylesheet, and the class rule above outranks it, so the element
   stays a grid while every script and every check still reads hidden === true.
   It shipped looking correct in a screenshot of a page whose tray had just been
   clicked, and wrong on every page nobody clicked. */
.yt-tray-panel[hidden]{display:none}
.yt-tray-eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#9aa0a8;font-weight:600;margin-bottom:4px}
.yt-tray-item{display:block;padding:9px 11px;border-radius:8px;background:rgba(255,255,255,.07);
  color:inherit;text-decoration:none;font-size:12.5px}
.yt-tray-item:hover{background:rgba(255,255,255,.14)}
.yt-tray-primary{background:#f4f2ec;color:#17191d;font-weight:600}
.yt-tray-primary:hover{background:#fff}
.yt-tray-note{margin:6px 0 0;font-size:11px;line-height:1.5;color:rgba(232,227,218,.55)}
/* The export pins its own WhatsApp pill across the bottom on narrow screens
   only. Sitting on top of it would cover the one action the design wants most,
   so the tray lifts above it there rather than fighting it for the corner. */
@media (max-width:760px){
  .yt-tray{right:16px;bottom:88px}
  .yt-tray-panel{width:min(270px,calc(100vw - 32px))}
}