@font-face{font-family:'Ragbet Reference Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('inter-variable.woff2') format('woff2')}
/* Exact mixed-media gallery rules extracted from the local preview's final base.css + components.css cascade.
 * Internal tm35pc classes are intentionally retained; every rule is isolated to the live gallery root.
 * The JSON/script mount owns markup. No theme or prototype application code is required. */
.ragbet-reference-media {
  --yc-font-body:"Ragbet Reference Inter",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --yc-font-heading:var(--yc-font-body);
  --pc-purple:#5e2cfa;--pc-ink:#221d35;--pc-muted:#716a82;--pc-line:#eae7f1;--pc-soft:#f7f5fc;--pc-radius:22px;
  --section-gap:32px;--card-inset:24px;--card-radius:16px;--card-line:#e9e6ef;
  box-sizing:border-box;display:block;min-width:0;width:100%;max-width:100%;margin:0 0 var(--section-gap);
  padding:var(--card-inset);border:1px solid var(--card-line);border-radius:var(--card-radius);background:#fff;
  color:var(--pc-ink);font-family:"Ragbet Reference Inter",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.6;font-style:normal;text-align:left;-webkit-font-smoothing:antialiased;
  scroll-margin-top:110px;
}
.ragbet-reference-media *, .ragbet-reference-media *::before, .ragbet-reference-media *::after {box-sizing:border-box}
.ragbet-reference-media[hidden], .ragbet-reference-media [hidden] {display:none!important}
.ragbet-reference-media button {appearance:none;font:inherit;letter-spacing:normal;text-transform:none;text-decoration:none;margin:0;min-height:0;min-width:0;color:inherit;cursor:pointer;border:0;-webkit-tap-highlight-color:transparent}
.ragbet-reference-media button:hover {filter:brightness(.98)}
.ragbet-reference-media button:disabled {cursor:default;opacity:.55}
.ragbet-reference-media button:focus-visible {outline:3px solid #bdaaff;outline-offset:4px}
.ragbet-reference-media img {max-width:100%;display:block}
.ragbet-reference-media h2,.ragbet-reference-media h3,.ragbet-reference-media p,.ragbet-reference-media figure,.ragbet-reference-media figcaption {margin:0;padding:0;font:inherit;letter-spacing:normal;text-transform:none}
.ragbet-reference-media svg {display:block;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

.ragbet-reference-media .tm35pc-media-heading { display:flex;align-items:center;gap:9px;font-size:14px;font-weight:750;line-height:1.3;color:#453a57 }
.ragbet-reference-media .tm35pc-media-heading>span { color:#95899f;font-size:11px;font-weight:550 }
.ragbet-reference-media .tm35pc-media-heading svg { width:17px;height:17px;color:var(--pc-purple) }
.ragbet-reference-media .tm35pc-gallery { position:relative;min-width:0 }
.ragbet-reference-media .tm35pc-media-track { display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/4);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;scrollbar-width:none;padding:2px 2px 8px;overscroll-behavior-x:contain }
.ragbet-reference-media .tm35pc-media-track::-webkit-scrollbar { display:none }
.ragbet-reference-media .tm35pc-photo-card,
.ragbet-reference-media .tm35pc-video-card { display:flex;flex-direction:column;min-width:0;scroll-snap-align:start;margin:0;border:1px solid var(--pc-line);border-radius:17px;background:#fff;overflow:hidden;box-shadow:0 5px 14px #29203704 }
.ragbet-reference-media .tm35pc-media-frame { position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#f1eef5;width:100% }
.ragbet-reference-media .tm35pc-media-image { display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease }
.ragbet-reference-media .tm35pc-media-caption { display:block;font-size:12px;line-height:1.55;color:#6f647d;padding:12px 14px;overflow-wrap:anywhere }
.ragbet-reference-media .tm35pc-gallery-footer { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;padding-inline:2px }
.ragbet-reference-media .tm35pc-gallery-hint { font-size:11px;color:#a094ac;margin:0 }
.ragbet-reference-media .tm35pc-gallery-controls { display:flex;align-items:center;gap:9px }
.ragbet-reference-media .tm35pc-gallery-counter { min-width:45px;text-align:center;font-size:11px;color:#83748e;font-variant-numeric:tabular-nums }
.ragbet-reference-media .tm35pc-round-button { display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;flex:none;border:1px solid #e8e1ef;border-radius:50%;background:#fff;color:#68517f }
.ragbet-reference-media .tm35pc-round-button svg { width:15px;height:15px }
.ragbet-reference-media .tm35pc-round-button:disabled { opacity:.3 }
.ragbet-reference-media .tm35pc-round-button:hover:not(:disabled) { border-color:#c5b3ec;background:#f6f2ff;color:var(--pc-purple) }
.ragbet-reference-media .tm35pc-video-frame { position:relative;width:100%;aspect-ratio:9/14;background:#24202e;overflow:hidden }
.ragbet-reference-media .tm35pc-video-launch { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:11px;width:100%;height:100%;padding:18px;border:0;background:linear-gradient(145deg,#393043,#211a2b);color:#fff }
.ragbet-reference-media .tm35pc-video-launch::after { position:absolute;inset:0;content:"";background:linear-gradient(180deg,#0000,#100b1b38);pointer-events:none }
.ragbet-reference-media .tm35pc-video-launch>img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover }
.ragbet-reference-media .tm35pc-play { z-index:1;width:49px;height:49px;border:1px solid #fff8;border-radius:50%;background:#ffffffed;color:var(--pc-purple);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 22px #0002 }
.ragbet-reference-media .tm35pc-play svg { width:20px;height:20px;margin-left:3px }
.ragbet-reference-media .tm35pc-video-launch-label { position:relative;z-index:1;font-size:11px;font-weight:650;color:#fff;text-shadow:0 1px 5px #0008 }
.ragbet-reference-media .tm35pc-video-frame video { width:100%;height:100%;display:block;object-fit:contain;background:#16121e }
.ragbet-reference-media .tm35pc-video-error { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px;padding:20px;color:#fff;font-size:12px;text-align:center;background:#24202e }
.ragbet-reference-media .tm35pc-video-error button { background:#fff;color:#4c267b;border:0;border-radius:9px;padding:8px 13px;font-size:12px;font-weight:750 }
@media (max-width:1050px) {
.ragbet-reference-media .tm35pc-media-track { grid-auto-columns:calc((100% - 32px)/3) }
}
@media (max-width:760px) {
.ragbet-reference-media .tm35pc-media-track { grid-auto-columns:calc((100% - 14px)/2.25);gap:14px;padding-bottom:6px }
.ragbet-reference-media .tm35pc-media-caption { font-size:11px;padding:10px 11px }
.ragbet-reference-media .tm35pc-photo-card,
.ragbet-reference-media .tm35pc-video-card { border-radius:14px }
.ragbet-reference-media .tm35pc-gallery-hint { font-size:10px }
.ragbet-reference-media .tm35pc-play { width:43px;height:43px }
}
.ragbet-reference-media .tm35pc-video-card { scroll-snap-align:start;min-width:0 }
.ragbet-reference-media .tm35pc-video-frame { aspect-ratio:9/14 }
.ragbet-reference-media .tm35pc-gallery-footer { justify-content:flex-end }
.ragbet-reference-media .tm35pc-media-heading { margin-top:23px }
.ragbet-reference-media .tm35pc-video-frame,
.ragbet-reference-media .tm35pc-video-launch { background:#f8f8fa!important;box-shadow:none!important }
.ragbet-reference-media .tm35pc-video-launch::before,
.ragbet-reference-media .tm35pc-video-launch::after { display:none!important }
.ragbet-reference-media .tm35pc-video-launch-label { color:#756584!important;text-shadow:none!important }
.ragbet-reference-media .tm35pc-play { background:#5e2cfa!important;color:#fff!important;box-shadow:none!important }
.ragbet-reference-media .tm35pc-video-card { box-shadow:none!important;border:1px solid #e8e3ed!important }

/* Final preview component overrides, kept in source order. */
.ragbet-reference-media .tm35pc-media-heading { margin:16px 0 12px }
.ragbet-reference-media .tm35pc-media-heading { margin:0 0 12px;font-size:16px;line-height:1.4;letter-spacing:-.2px }
.ragbet-reference-media .tm35pc-mixed-track { grid-auto-columns:calc((100% - 48px)/4);gap:16px;align-items:stretch }
.ragbet-reference-media .tm35pc-mixed-track>.tm35pc-photo-card,
.ragbet-reference-media .tm35pc-mixed-track>.tm35pc-video-card { width:100%;height:100%;border-radius:12px;box-shadow:none }
.ragbet-reference-media .tm35pc-mixed-track .tm35pc-media-frame,
.ragbet-reference-media .tm35pc-mixed-track .tm35pc-video-frame { aspect-ratio:4/5;flex:none;background:#f8f8fa }
.ragbet-reference-media .tm35pc-mixed-track .tm35pc-media-image,
.ragbet-reference-media .tm35pc-mixed-track .tm35pc-video-launch>img { width:100%;height:100%;object-fit:cover }
.ragbet-reference-media .tm35pc-mixed-track .tm35pc-video-frame video { object-fit:contain }
.ragbet-reference-media .tm35pc-mixed-track .tm35pc-video-launch { background:#f8f8fa!important;box-shadow:none }
.ragbet-reference-media .tm35pc-mixed-track .tm35pc-video-launch::before,
.ragbet-reference-media .tm35pc-mixed-track .tm35pc-video-launch::after { display:none }
.ragbet-reference-media .tm35pc-gallery-footer { justify-content:flex-end;margin-top:10px }
@media(max-width:1050px) {
.ragbet-reference-media .tm35pc-mixed-track { grid-auto-columns:calc((100% - 32px)/3) }
}
@media(max-width:600px) {
.ragbet-reference-media .tm35pc-media-heading { font-size:15px;margin-bottom:10px }
.ragbet-reference-media .tm35pc-mixed-track { grid-auto-columns:calc((100% - 14px)/2.25);gap:14px }
.ragbet-reference-media .tm35pc-mixed-track>.tm35pc-photo-card,
.ragbet-reference-media .tm35pc-mixed-track>.tm35pc-video-card { border-radius:10px }
}
.ragbet-reference-media .tm35pc-video-metadata { position:absolute;inset:12px 12px auto;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:2;pointer-events:none }
.ragbet-reference-media .tm35pc-video-metadata>span { display:inline-flex;align-items:center;min-height:26px;padding:4px 9px;border-radius:5px;background:#17131dc9;color:#fff;font-size:11px;font-weight:600;line-height:1.4;font-variant-numeric:tabular-nums }
.ragbet-reference-media .tm35pc-video-launch.has-poster .tm35pc-play { width:54px;height:54px;border:0;background:#fff!important;color:#352742!important;box-shadow:0 2px 12px #0002!important }
.ragbet-reference-media .tm35pc-video-launch.has-poster .tm35pc-video-launch-label { color:#fff!important;background:#17131dc9;padding:5px 10px;border-radius:5px;text-shadow:none!important;font-size:12px }
@media(max-width:600px) {
.ragbet-reference-media .tm35pc-video-metadata { inset:8px 8px auto }
.ragbet-reference-media .tm35pc-video-metadata>span { font-size:10px;padding:3px 6px;min-height:23px }
.ragbet-reference-media .tm35pc-video-launch.has-poster .tm35pc-play { width:44px;height:44px }
.ragbet-reference-media .tm35pc-video-launch.has-poster .tm35pc-video-launch-label { font-size:10px;padding:4px 7px }
}
.ragbet-reference-media .tm35pc-mixed-track .tm35pc-video-launch>img { object-position:center top }
.ragbet-reference-media .tm35pc-gallery-controls--bottom {
  justify-content:center;
  gap:12px;
  margin-top:8px;
  text-align:center;
}
.ragbet-reference-media .tm35pc-gallery-controls--bottom .tm35pc-round-button {
  width:44px;
  height:44px;
  color:var(--yc-text,#273142);
}
.ragbet-reference-media .tm35pc-gallery-controls--bottom .tm35pc-round-button[aria-disabled="true"] {
  opacity:.42;
  cursor:default;
}
.ragbet-reference-media .tm35pc-swipe-hint {
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  color:var(--yc-text,#273142);
}
.ragbet-reference-media .tm35pc-gallery-counter--sr {
  position:absolute;
  width:1px;
  height:1px;
  min-width:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
@keyframes tm35pc-swipe-direction {
  50% { transform:translateX(var(--tm35pc-swipe-nudge, 5px)); }
}
.ragbet-reference-media .tm35pc-swipe-demo .tm35pc-round-button svg {
  animation:tm35pc-swipe-direction .8s ease-in-out 2;
}
.ragbet-reference-media .tm35pc-swipe-demo .tm35pc-round-button:first-child svg {
  --tm35pc-swipe-nudge:-5px;
}

/* Self-contained section geometry; prototype variables originally came from :root. */
.ragbet-reference-media {padding:var(--card-inset);border:1px solid var(--card-line);border-radius:var(--card-radius);background:#fff}
@media(max-width:1100px) and (min-width:801px) {.ragbet-reference-media {--card-inset:18px}}
@media(max-width:800px) {.ragbet-reference-media {--card-inset:20px;--section-gap:24px}}
@media(max-width:600px) {.ragbet-reference-media {--card-inset:16px;--card-radius:14px}}
@media(prefers-reduced-motion:reduce) {
  .ragbet-reference-media *, .ragbet-reference-media *::before, .ragbet-reference-media *::after {scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
/* The live theme sets height:auto on #main-content media; preserve the copied frame geometry. */
.ragbet-reference-media .tm35pc-media-image,
.ragbet-reference-media .tm35pc-video-launch>img,
.ragbet-reference-media .tm35pc-video-frame video{height:100%!important}

.ragbet-reference-media .tm35pc-photo-card { cursor:default; }