.sp-announcement-wrap {
  width:min(1180px,calc(100% - 36px));
  min-height:56px;
  margin:18px auto 12px;
}
.about-announcements.sp-announcement-wrap{width:100%}
#announcementMount.sp-announcement-wrap{margin-top:calc(14px - var(--app-header-gap,0px));margin-bottom:14px}

.sp-announcement-carousel{
  position:relative;
  height:56px;
  overflow:hidden;
  border-radius:15px;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
.sp-announcement-viewport{height:100%;overflow:hidden;border-radius:inherit}
.sp-announcement-track{display:flex;height:100%;transition:transform .22s ease;will-change:transform}

.sp-announcement,
.about-announcement{
  --announcement-accent:var(--sp-accent-hover,#a72a42);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:0 0 100%;
  gap:12px;
  width:100%;
  height:100%;
  min-width:0;
  padding:8px 14px;
  border:1px solid rgba(181,52,77,.34);
  border-radius:15px;
  background:linear-gradient(135deg,rgba(138,32,54,.2),rgba(21,17,21,.91) 58%,rgba(12,15,19,.9));
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset;
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  backdrop-filter:blur(14px) saturate(115%);
  cursor:pointer;
}
.sp-announcement:hover,.about-announcement:hover{border-color:rgba(181,52,77,.5)}
.sp-announcement:focus-visible,.about-announcement:focus-visible{outline:2px solid color-mix(in srgb,var(--sp-accent-hover,#a72a42) 72%,#fff);outline-offset:-3px}
.sp-announcement-carousel:has(.sp-announcement-navigation) .sp-announcement-slide{padding-right:108px}
.sp-announcement-copy{display:flex;align-items:center;flex:1 1 auto;gap:12px;min-width:0}
.sp-announcement-copy>div{min-width:0}
.sp-announcement-icon{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:10px;
  color:var(--sp-accent-hover,#a72a42);
  background:color-mix(in srgb,var(--sp-accent-hover,#a72a42) 16%,transparent);
}
.sp-announcement-icon svg{width:17px;height:17px}
.sp-announcement h3,.about-announcement h3{margin:0 0 4px;font-size:14px;line-height:1.25}
.sp-announcement p,.about-announcement p{
  display:-webkit-box;
  margin:0;
  overflow:hidden;
  color:#b4b6bb;
  font-size:11.5px;
  line-height:1.45;
  white-space:pre-line;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.sp-announcement .sp-announcement-read-hint,.about-announcement .sp-announcement-read-hint{color:#9298a1;font-size:10px;font-weight:750;letter-spacing:.01em}

.sp-announcement-navigation{
  position:absolute;
  top:50%;
  right:10px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:3px;
  transform:translateY(-50%);
}
.sp-announcement-navigation button{
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  padding:0;
  border:1px solid transparent;
  border-radius:9px;
  color:#9ca3ad;
  background:rgba(10,13,17,.46);
  cursor:pointer;
}
.sp-announcement-navigation button:hover,
.sp-announcement-navigation button:focus-visible{border-color:rgba(255,255,255,.1);color:#f5f6f4;background:rgba(255,255,255,.075)}
.sp-announcement-navigation svg{width:15px;height:15px}
.sp-announcement-position{min-width:31px;color:#aeb3ba;font-size:9px;font-weight:800;text-align:center}
.sp-announcement-position b{color:#fff}

.sp-announcement-reader{
  width:min(620px,calc(100vw - 28px));
  max-height:min(80vh,720px);
  margin:auto;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(225,232,240,.14);
  border-radius:18px;
  color:#f5f6f4;
  background:linear-gradient(145deg,rgba(29,35,42,.97),rgba(11,14,18,.97));
  box-shadow:0 30px 80px rgba(0,0,0,.58),0 1px 0 rgba(255,255,255,.06) inset;
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  backdrop-filter:blur(22px) saturate(120%);
}
.sp-announcement-reader::backdrop{background:rgba(2,4,7,.7);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sp-announcement-reader-shell{display:flex;max-height:min(80vh,720px);flex-direction:column}
.sp-announcement-reader-head{display:grid;grid-template-columns:40px minmax(0,1fr) 34px;align-items:center;gap:12px;padding:18px 18px 15px;border-bottom:1px solid rgba(225,232,240,.1)}
.sp-announcement-reader-head>div>span{display:block;margin-bottom:3px;color:#8f959e;font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.sp-announcement-reader-head h2{margin:0;font-size:18px;line-height:1.25}
.sp-announcement-reader-head .sp-announcement-icon{width:40px;height:40px}
.sp-announcement-reader-head button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgba(225,232,240,.1);border-radius:10px;color:#aeb3ba;background:rgba(255,255,255,.035);cursor:pointer}
.sp-announcement-reader-head button:hover,.sp-announcement-reader-head button:focus-visible{color:#fff;background:rgba(255,255,255,.08)}
.sp-announcement-reader-head button svg{width:16px;height:16px}
.sp-announcement-reader-body{overflow:auto;padding:18px;color:#d1d4d8;font-size:13px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sp-announcement,.about-announcement{background:#21161a}
  .sp-announcement-reader{background:#15191e}
}

@media(max-width:650px){
  .sp-announcement-wrap{width:min(100% - 16px,1180px);min-height:52px;margin-top:12px;margin-bottom:8px}
  .about-announcements.sp-announcement-wrap{width:100%}
  #announcementMount.sp-announcement-wrap{margin-top:calc(12px - var(--app-header-gap,0px));margin-bottom:12px}
  .sp-announcement-carousel{height:52px}
  .sp-announcement,.about-announcement{padding:7px 10px}
  .sp-announcement-carousel:has(.sp-announcement-navigation) .sp-announcement-slide{padding-right:48px}
  .sp-announcement-copy{gap:9px}
  .sp-announcement-icon{flex-basis:31px;width:31px;height:31px}
  .sp-announcement h3,.about-announcement h3{font-size:12px}
  .sp-announcement p,.about-announcement p{font-size:10.5px}
  .sp-announcement .sp-announcement-read-hint,.about-announcement .sp-announcement-read-hint{font-size:9.5px}
  .sp-announcement-navigation{right:8px;top:50%;bottom:auto;transform:translateY(-50%)}
  .sp-announcement-navigation button{display:none}
  .sp-announcement-position{min-width:28px;padding:4px 5px;border-radius:999px;background:rgba(10,13,17,.48)}
  .sp-announcement-reader-head{grid-template-columns:34px minmax(0,1fr) 32px;gap:9px;padding:15px 14px 13px}
  .sp-announcement-reader-head .sp-announcement-icon{width:34px;height:34px}
  .sp-announcement-reader-head h2{font-size:16px}
  .sp-announcement-reader-body{padding:15px 14px 18px;font-size:12px;line-height:1.6}
}

@media(prefers-reduced-motion:reduce){.sp-announcement-track{transition:none}}
