.announcement-layout{display:grid;grid-template-columns:minmax(270px,.8fr) minmax(0,1.3fr);gap:30px;align-items:start}
.announcement-compose form,.announcement-compose label{display:grid;gap:9px}
.announcement-compose form{gap:17px}
.announcement-compose label,.announcement-simulator label{font-size:.75rem;color:var(--muted)}
.announcement-compose [hidden]{display:none!important}
.announcement-compose input,.announcement-compose select,.announcement-compose textarea,.announcement-simulator select{width:100%;box-sizing:border-box;background:#0d0d12;color:var(--ink);border:1px solid var(--line-strong);border-radius:8px;padding:11px;font:inherit}
.announcement-compose textarea{resize:vertical;line-height:1.5}
#announcement-text-fields,#announcement-media-fields{display:grid;gap:16px}
.announcement-group-title{display:flex;gap:12px;align-items:center;font-size:.9rem;font-weight:600;padding:6px 0}
.announcement-group-title span{font-size:.65rem;color:var(--accent);border:1px solid var(--line-strong);padding:5px;border-radius:5px}
.announcement-control-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.announcement-compose-footer{border-top:1px solid var(--line)}
.announcement-compose-footer .button{width:100%}
.announcement-preview{position:sticky;top:24px}
.announcement-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:5px 0 20px}
.announcement-preview-heading .section-label{font-size:.64rem;color:var(--accent);letter-spacing:1.6px}
.announcement-preview-heading p{font-size:.85rem;color:var(--muted);margin:9px 0}
.announcement-simulator{display:flex;gap:18px;align-items:center;justify-content:space-between;margin-bottom:16px}
.announcement-simulator>label:first-child{display:grid;gap:7px}
.announcement-motion-check{display:flex;gap:6px;align-items:center}
.announcement-app,[data-theme]{--a:#ff75c7;--soft:#ffa6de;--surface:#09080b;--panel:#17131a;--effect:linear-gradient(120deg,var(--a),var(--soft));--ink:#fafafa;--sub:#b9b5c0}
.announcement-app[data-theme=rainbow],[data-theme=rainbow]{--a:#f552b3;--soft:#47c2ff;--surface:#06060e;--panel:#141020;--effect:linear-gradient(110deg,#ff304c,#ffaa20,#7cda68,#47c2ff,#b638ff)}
.announcement-app[data-theme=lime],[data-theme=lime]{--a:#94cc4d;--soft:#b3e070;--surface:#060a05;--panel:#111c0e}
.announcement-app[data-theme=night],[data-theme=night]{--a:#bdbdbd;--soft:#858585;--surface:#000;--panel:#101010;--sub:#b6b6b6}
.announcement-app[data-theme=dracula],[data-theme=dracula]{--a:#940404;--soft:#c64b4b;--surface:#000;--panel:#160606;--sub:#c4b3b3}
.announcement-app{position:relative;min-height:640px;border:1px solid #ffffff20;border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:0 24px 70px #0005}
.announcement-window{display:flex;align-items:center;justify-content:space-between;padding:18px 16px;border-bottom:1px solid #ffffff10;color:var(--sub);font-size:.66rem}
.announcement-window>span:first-child{color:var(--a);letter-spacing:3px}
.announcement-app-backdrop{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:28px;opacity:.18}
.announcement-app-backdrop>span{grid-column:1/-1;color:var(--a);font-size:1.5rem;font-weight:700}
.announcement-app-backdrop div{height:130px;border:1px solid var(--a);border-radius:12px}
.announcement-app-backdrop div:last-child{grid-column:1/-1;height:190px}
#announcement-stage{position:absolute;inset:86px 25px 24px;display:grid;place-items:center;perspective:900px}
.announcement-popup{position:relative;isolation:isolate;box-sizing:border-box;width:100%;max-width:450px;max-height:100%;overflow:auto;border:1px solid color-mix(in srgb,var(--a) 35%,#ffffff16);border-radius:22px;padding:26px;background:var(--panel);color:var(--ink);box-shadow:0 30px 75px #000a;overflow-wrap:anywhere;animation:ann-rise .65s cubic-bezier(.16,1,.3,1) both}
.announcement-top{position:relative;display:flex;gap:10px;align-items:center;font-size:.6rem;letter-spacing:1.1px}
.announcement-mark{position:relative;font-weight:800;font-size:17px;letter-spacing:-1px;padding:9px;color:var(--soft);background:color-mix(in srgb,var(--a) 12%,transparent);border-radius:10px}
.announcement-mark span{font-size:11px;position:absolute;right:0;top:0}
.announcement-top small{display:block;font-size:.6rem;letter-spacing:0;margin-top:6px;color:var(--sub)}
.announcement-close{margin-left:auto;background:#ffffff08;color:var(--sub);border:1px solid #ffffff0e;width:30px;height:30px;border-radius:50%;font-size:19px;cursor:pointer}
.announcement-kicker{display:flex;justify-content:space-between;align-items:center;font-size:.58rem;letter-spacing:2px;color:var(--soft);margin:40px 0 20px}
.announcement-kicker span{font-size:26px}
.announcement-copy h3{font-size:2.35rem;line-height:1.04;font-weight:620;letter-spacing:-1.2px;margin:18px 0}
.announcement-copy p{font-size:.83rem;line-height:1.7;color:var(--sub);white-space:pre-wrap}
.announcement-bottom{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:24px;border-top:1px solid #ffffff0d;padding-top:17px;font-size:.6rem;color:var(--sub)}
.announcement-image{display:block;width:100%;max-height:285px;object-fit:contain;margin:24px auto 0;border-radius:10px;background:#0003}
.announcement-image-empty{display:grid;justify-items:center;gap:12px;text-align:center;padding:45px 20px;margin-top:24px;border:1px dashed color-mix(in srgb,var(--a) 45%,transparent);border-radius:12px;color:var(--sub);font-size:.8rem}
.announcement-image-empty>span{font-size:32px;color:var(--soft)}
.announcement-image-empty small{font-size:.65rem}
.announcement-file-row{display:flex;justify-content:space-between;gap:10px;overflow-wrap:anywhere;font-size:.7rem;color:var(--muted)}
#announcement-image-error{color:#ff9caa}
[data-animation=spring]{animation-name:ann-spring;animation-duration:.7s}
[data-animation=slide]{animation-name:ann-slide}
[data-animation=unfold]{transform-origin:top;animation-name:ann-unfold}
[data-animation=fade]{animation:ann-fade .6s ease-out both}
[data-animation=none]{animation:none}
.announcement-popup.still{animation:none}
.announcement-popup.leaving{animation:ann-exit .2s ease-out forwards;pointer-events:none}
.announcement-preview :focus-visible,.announcement-compose :focus-visible{outline:2px solid var(--soft,var(--accent));outline-offset:3px}
.announcement-app.reduced .announcement-popup{animation:none}
.announcement-app.reduced .leaving{visibility:hidden}
@keyframes ann-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes ann-spring{0%{opacity:0;transform:scale(.82)}65%{opacity:1;transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes ann-slide{from{opacity:0;transform:translateX(65px)}to{opacity:1;transform:none}}
@keyframes ann-unfold{from{opacity:0;transform:rotateX(-22deg) scaleY(.92)}to{opacity:1;transform:none}}
@keyframes ann-fade{from{opacity:0}to{opacity:1}}
@keyframes ann-exit{to{opacity:0;transform:scale(.98)}}
@media(prefers-reduced-motion:reduce){.announcement-popup{animation:none!important}
.announcement-popup.leaving{visibility:hidden}}
@media(max-width:1100px){.announcement-layout{grid-template-columns:1fr}
.announcement-preview{position:static}}
@media(max-width:480px){#announcement-stage{inset:80px 12px 20px}
.announcement-popup{padding:20px}
.announcement-copy h3{font-size:1.95rem}
.announcement-simulator{align-items:end;gap:10px}
.announcement-motion-check{max-width:110px}
.announcement-control-pair{grid-template-columns:1fr}
.announcement-app{min-height:660px}}
.announcement-countdown{height:2px;background:var(--effect);margin-top:15px;transform-origin:left;animation:ann-countdown 5s linear forwards}
.announcement-app.reduced .announcement-countdown{animation:none;display:none}
@keyframes ann-countdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.announcement-countdown{animation:none;display:none}}
[data-animation=warp]{animation:ann-warp 1.1s cubic-bezier(.16,1,.3,1) both}
[data-animation=slam]{animation:ann-slam .85s ease-out both}
[data-animation=vortex]{animation:ann-vortex 1s cubic-bezier(.16,1,.3,1) both}
[data-animation=glitch]{animation:ann-glitch .85s steps(1,end) both}
.announcement-upload{padding:18px;border:1px dashed var(--accent);border-radius:12px;background:#ff8bd108}
.announcement-upload input{border:0;padding:6px 0;background:none;font-size:.72rem}
@keyframes ann-warp{0%{opacity:0;transform:perspective(800px) translateZ(-600px) rotateY(38deg) scale(.2);filter:blur(20px)}65%{opacity:1;transform:perspective(800px) translateZ(20px) rotateY(-4deg) scale(1.02);filter:blur(0)}100%{transform:none;filter:none}}
@keyframes ann-slam{0%{opacity:0;transform:translateY(-350px) rotate(-18deg) scale(1.3)}48%{opacity:1;transform:translateY(12px) rotate(3deg) scale(.96)}66%{transform:translateY(-10px) rotate(-2deg)}82%{transform:translateY(3px) rotate(1deg)}100%{transform:none}}
@keyframes ann-vortex{0%{opacity:0;transform:rotate(-150deg) scale(.08);filter:blur(12px)}70%{opacity:1;transform:rotate(7deg) scale(1.04);filter:none}100%{transform:none}}
@keyframes ann-glitch{0%{opacity:0;transform:translateX(-50px) skewX(15deg);clip-path:inset(10% 0 75%)}22%{opacity:1;transform:translateX(24px) skewX(-8deg);clip-path:inset(45% 0 15%)}44%{transform:translateX(-12px);clip-path:inset(0 0 35%)}66%{transform:translateX(5px);clip-path:inset(5% 0 0)}100%{opacity:1;transform:none;clip-path:inset(0)}}
.announcement-app.reduced .announcement-popup{animation:none!important}
@media(prefers-reduced-motion:reduce){.announcement-popup{animation:none!important}}
#announcement-stage{inset:102px 48px 48px}
.announcement-popup{padding:0;overflow:visible;max-height:none;border:0;background:none;box-shadow:none;width:100%;max-width:450px}
.announcement-surface{position:relative;border:1px solid color-mix(in srgb,var(--a) 40%,transparent);border-radius:18px;background:var(--panel);overflow:hidden;box-shadow:0 20px 60px #0008;min-height:160px}
.announcement-close{position:absolute;top:10px;right:10px;z-index:3;background:#101015b8;color:#fff;border-color:#ffffff44;backdrop-filter:blur(10px)}
.announcement-image{width:100%;height:auto;max-height:390px;object-fit:contain;margin:0;border-radius:0;background:#000}
.announcement-image-empty{height:290px;padding:0;margin:0;border:0;border-radius:0;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--a) 12%,var(--panel)),var(--panel));align-content:center}
.announcement-copy{padding:24px}
.announcement-copy h3{font-size:clamp(18px,2.2vw,30px);line-height:1.15;margin:12px 0;letter-spacing:-.5px}
.announcement-copy p{font-size:13px;line-height:1.45;margin:0;white-space:pre-wrap}
.announcement-popup[data-format=mixed] .announcement-copy{padding:14px 20px}
.announcement-popup[data-format=mixed] .announcement-image{max-height:260px}
.announcement-countdown{position:absolute;bottom:8px;left:16px;right:16px;margin:0;height:2px;border-radius:999px;animation-duration:var(--duration)}
[data-animation=portal]{animation:ann-portal 1.1s cubic-bezier(.16,1,.3,1) both}
[data-animation=comet]{animation:ann-comet 1s cubic-bezier(.16,1,.3,1) both}
[data-animation=shatter]{animation:ann-shatter 1.1s ease-out both}
[data-animation=shock]{animation:ann-shock 1s ease-out both}
[data-animation=hologram]{animation:ann-hologram 1.2s ease-out both}
@keyframes ann-portal{0%{opacity:0;transform:rotateY(85deg) scale(.2);filter:blur(12px)}65%{opacity:1;transform:rotateY(-12deg) scale(1.03);filter:none}100%{transform:none}}
@keyframes ann-comet{0%{opacity:0;transform:translate(-280px,-260px) rotate(-35deg) scale(.3);filter:blur(15px)}65%{opacity:1;transform:translate(8px,8px) rotate(4deg);filter:none}100%{transform:none}}
@keyframes ann-shatter{0%{opacity:0;clip-path:polygon(50% 50%,0 0,30% 0,50% 50%,100% 0,100% 30%,50% 50%,100% 100%,70% 100%,50% 50%,0 100%,0 70%);transform:scale(1.4) rotate(8deg)}60%{opacity:1;clip-path:polygon(50% 0,0 0,30% 0,100% 0,100% 0,100% 30%,100% 100%,100% 100%,70% 100%,0 100%,0 100%,0 70%)}100%{opacity:1;clip-path:inset(0);transform:none}}
@keyframes ann-shock{0%{opacity:0;transform:scale(1.8);filter:blur(12px)}45%{opacity:1;transform:scale(.9);filter:none}65%{transform:scale(1.06)}80%{transform:scale(.98)}100%{transform:none}}
@keyframes ann-hologram{0%{opacity:0;clip-path:inset(100% 0 0);transform:skewX(10deg)}50%{opacity:.7;clip-path:inset(45% 0 0);transform:skewX(-3deg)}100%{opacity:1;clip-path:inset(0);transform:none}}
@media(prefers-reduced-motion:reduce){.announcement-popup{animation:none!important}}
@media(max-width:480px){#announcement-stage{inset:95px 30px 45px}
.announcement-copy{padding:18px}
.announcement-copy p{font-size:12px}
.announcement-image{max-height:360px}
.announcement-copy h3{font-size:21px}}

/* Keep durations in the stylesheet so the production CSP needs no inline styles. */
.announcement-popup[data-duration="3"]{--duration:3s}
.announcement-popup[data-duration="5"]{--duration:5s}
.announcement-popup[data-duration="8"]{--duration:8s}
.announcement-popup[data-duration="10"]{--duration:10s}
.announcement-popup[data-duration="15"]{--duration:15s}
.announcement-popup[data-duration="30"]{--duration:30s}

.announcement-confirm{max-width:440px;border:1px solid var(--line-strong);border-radius:16px;padding:28px;background:#17131a;color:#fafafa;box-shadow:0 24px 90px #000a}
.announcement-confirm::backdrop{background:#0009}
.announcement-confirm h2{font-size:22px;margin:0 0 12px}
.announcement-confirm p{line-height:1.5;color:#ccc}
.announcement-confirm>div{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}