.announcement-bar{position:fixed;inset:0 0 auto;z-index:110;display:flex;align-items:center;justify-content:center;gap:22px;padding:10px max(20px,5vw);min-height:46px;background:#1b2a1e;color:#fcf9f2;border-bottom:1px solid #ffffff20;font:12px/1.5 var(--body);isolation:isolate}
.announcement-slides{flex:1;min-width:0;max-width:1100px}.announcement-slide{display:flex;align-items:center;justify-content:center;gap:18px}.announcement-slide[hidden]{display:none}.announcement-label{color:#e6cf95;letter-spacing:.13em;font-size:9px;font-weight:700;text-transform:uppercase;white-space:nowrap}.announcement-message{overflow-wrap:anywhere}.announcement-slide a{white-space:nowrap;text-decoration:underline;text-underline-offset:4px;font-size:11px;color:#e6cf95}.announcement-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}.announcement-controls button{display:grid;place-items:center;min-width:30px;min-height:30px;background:transparent;color:inherit;border:1px solid #ffffff38;border-radius:50%;font-size:19px;cursor:pointer}.announcement-controls span{font-size:9px;min-width:30px;text-align:center}.announcement-controls [data-announcement-pause]{font-size:11px}.announcement-bar :focus-visible{outline:2px solid #e6cf95;outline-offset:3px}.announcement-editor{scroll-margin-top:calc(var(--nav-height,88px) + 20px)}.announcement-admin-card{border:1px solid var(--line);padding:22px;margin-top:16px;background:#fcf9f2}.announcement-admin-card header{display:flex;justify-content:space-between;gap:12px;align-items:center}.announcement-admin-card p{white-space:pre-wrap;overflow-wrap:anywhere}.announcement-preview{padding:18px;background:#1b2a1e;color:#fcf9f2;margin:16px 0;border-left:4px solid #e6cf95}
@media(max-width:700px){.announcement-bar{padding:8px 12px;gap:8px;font-size:11px;align-items:center}.announcement-slide{flex-wrap:wrap;justify-content:flex-start;gap:2px 9px}.announcement-label{font-size:8px}.announcement-message{flex-basis:100%;line-height:1.45}.announcement-slide a{font-size:10px}.announcement-controls{flex-wrap:wrap;width:65px;justify-content:center;gap:3px}.announcement-controls span{order:4;font-size:8px;min-width:20px}.announcement-controls button{min-height:26px;min-width:26px}.announcement-controls [data-announcement-pause]{order:5}}
/* Phones and small tablets: centred like a classic announcement bar. The label sits on top and the message and link read as one sentence that
   wraps naturally (the link no longer drops onto a line of its own). Controls stay compact on the right. */
@media(max-width:700px){
 .announcement-bar{align-items:center;justify-content:center;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
 .announcement-slide{display:block;text-align:center}
 .announcement-label{display:block;margin-bottom:2px}
 .announcement-message{display:inline}
 .announcement-slide a{display:inline-block;margin-left:6px;white-space:nowrap}
 .announcement-controls{align-self:center}
}
/* Mid-size screens: let long messages wrap instead of squeezing the link. */
@media(min-width:700.02px) and (max-width:1100px){.announcement-slide{flex-wrap:wrap;gap:4px 14px}}
/* Several announcements rotate on their own (interval from Studio); each one rises and fades in.
   Reduced motion: they still change, just without movement. */
.announcement-slide.is-entering{animation:announcement-in .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes announcement-in{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}
.announcement-slides{overflow:hidden}
@media(prefers-reduced-motion:reduce){.announcement-slide.is-entering{animation:none}}