.class-ribbon{position:relative;background:linear-gradient(90deg,#17131d,#21172a,#17131d);border-block:1px solid #ddbb7829;padding:0 48px 0 0}
.class-ribbon-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.class-ribbon-track{display:flex;width:max-content;animation:class-ribbon-travel 48s linear infinite}
.class-ribbon-group{display:flex;flex:none;list-style:none;padding:22px 0;margin:0;gap:0}
.class-ribbon-group li{display:flex;align-items:center;gap:13px;width:210px;flex:none;padding:0 20px}
.class-ribbon-group img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 3px 8px #0006)}
.class-ribbon-group small{display:block;font-size:8px;letter-spacing:1.6px;color:#b5a4c0;margin-bottom:6px}
.class-ribbon-group strong{font-size:13px;font-weight:600;color:#eadbc0}
.ribbon-separator{color:#ddbb784d;margin-left:auto;font-size:15px}
.ribbon-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:1px solid #ddbb7840;border-radius:50%;background:#17131d;color:var(--gold);cursor:pointer}
.class-ribbon:hover .class-ribbon-track,.class-ribbon:focus-within .class-ribbon-track,.class-ribbon.is-paused .class-ribbon-track{animation-play-state:paused}
@keyframes class-ribbon-travel{to{transform:translateX(-50%)}}
@media(max-width:800px){.class-ribbon-group{padding:16px 0}.class-ribbon-group li{width:180px;padding:0 14px;gap:10px}.class-ribbon-group img{width:40px;height:40px}.class-ribbon-group strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.class-ribbon{padding:0}.class-ribbon-window{overflow:visible;mask-image:none}.class-ribbon-track{animation:none;width:100%}.class-ribbon-group{flex-wrap:wrap;justify-content:center;width:100%;gap:18px 0}.class-ribbon-group li{width:180px}.class-ribbon-group[aria-hidden=true],.ribbon-toggle{display:none}}