/* 2.8.55: announcement card designs (keys in app/anns_extra.py).
   <html data-ann="..."> picks the design for the "Latest announcement" card on the home screen
   (templates/home.html: a.glass.ann) and for posts in announcement channels (article.msg.ann-msg .bubble).
   Every design keeps the unread state loud (it animates) and read ones calm. Colours come from the style's
   tokens, so each design works in dark and light styles. "classic" adds nothing: it is the look in app.css. */

/* ---------- shared ---------- */
.ann-deco { display: none; }
html .ann, html .msg.ann-msg .bubble { --an-ink: color-mix(in oklab, var(--a) 62%, var(--hi)); --an-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; }
html:where([data-ann]:not([data-ann="classic"])) .ann > :is(.hd, .ann-img, .ann-body, .row) { position: relative; z-index: 2; }
html:where([data-ann]:not([data-ann="classic"])) .glass.ann:not(.flat):not(.stat) { outline: none; animation: none; }
html:where([data-ann]:not([data-ann="classic"])) .ann.unread::after { content: none; animation: none; }
html:where([data-ann]:not([data-ann="classic"])) .ann.unread :is(.glyph, .new) { animation: none; }
html:where([data-ann]:not([data-ann="classic"])) .ann .ann-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
html:where([data-ann]:not([data-ann="classic"])) .ann .ann-deco i { position: absolute; display: none; }
html:where([data-ann]:not([data-ann="classic"])) .ann .hd .grow { min-width: 0; }

/* =====================================================================
   BROADCAST: a TV news lower-third with a LIVE strip and a ticker
   ===================================================================== */
html[data-ann="broadcast"] .glass.ann:not(.flat) { padding: 0; border-radius: var(--r-lg); border: 1px solid transparent;
  background: linear-gradient(var(--solid), var(--solid)) padding-box, linear-gradient(var(--line-2), var(--line-2)) border-box;
  box-shadow: var(--shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="broadcast"] .ann .bloom, html[data-ann="broadcast"] .ann .glyph { display: none; }
html[data-ann="broadcast"] .ann .hd { gap: 10px; padding: 10px 12px; color: #fff;
  background: linear-gradient(90deg, color-mix(in oklab, var(--a) 74%, #000), color-mix(in oklab, var(--a2) 62%, #000));
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
html[data-ann="broadcast"] .ann .hd::before { content: "LIVE"; flex: none; font: 800 10.5px/1 var(--body); letter-spacing: .16em; color: #111;
  padding: 5px 8px 5px 18px; border-radius: 3px; background: radial-gradient(circle 3.5px at 9px 50%, #ff2d4a 92%, transparent) no-repeat, #fff; }
html[data-ann="broadcast"] .ann .label { color: #fff; font: 800 13px/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; }
html[data-ann="broadcast"] .ann .hd .hint { color: rgba(255,255,255,.84); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ann="broadcast"] .ann .new { border-radius: 3px; background: #fff; color: #111; box-shadow: none; }
html[data-ann="broadcast"] .ann .ann-img { width: calc(100% - 28px); margin: 14px 14px 0; border-radius: 6px; }
html[data-ann="broadcast"] .ann .ann-body { margin: 14px 14px 0; padding: 1px 0 1px 12px; border-left: 4px solid var(--a); font-weight: 500; }
html[data-ann="broadcast"] .ann .row { margin: 14px 0 0; gap: 0; height: 34px; overflow: hidden; background: var(--fg); }
html[data-ann="broadcast"] .ann .row::before { content: "NEWS"; position: relative; z-index: 2; flex: none; align-self: stretch; display: grid; place-items: center;
  padding: 0 10px; font: 800 11px/1 var(--display); letter-spacing: .14em; color: #fff; background: color-mix(in oklab, var(--a) 74%, #000); }
html[data-ann="broadcast"] .ann .row .hint { flex: 1; min-width: 0; padding-left: 10px; white-space: nowrap; overflow: hidden; color: var(--bg);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
html[data-ann="broadcast"] .ann .row .btn { position: relative; z-index: 2; align-self: stretch; height: auto; border: 0; border-radius: 0; padding: 0 14px;
  color: #fff; background: color-mix(in oklab, var(--a) 74%, #000); box-shadow: -8px 0 12px -4px var(--fg); }
html[data-ann="broadcast"] .glass.ann.unread:not(.flat) { box-shadow: var(--shadow), 0 0 0 1.5px var(--a), 0 0 22px -6px var(--a-60); animation: bc-glow 2s ease-in-out infinite; }
html[data-ann="broadcast"] .ann.unread .hd::before { animation: bc-live 1.1s steps(1) infinite; }
html[data-ann="broadcast"] .ann.unread .new { animation: ann-pop 1.2s ease-in-out infinite; }
html[data-ann="broadcast"] .ann.unread .row .hint { animation: bc-tick 8s linear infinite; }
html[data-ann="broadcast"] .ann.unread .row .hint::before { content: "Breaking \00a0\2022\00a0 New announcement \00a0\2022\00a0 "; }
@keyframes bc-live { 50% { background: #fff; } }
@keyframes bc-tick { from { text-indent: 100%; } to { text-indent: -240%; } }
@keyframes bc-glow { 50% { box-shadow: var(--shadow), 0 0 0 1.5px var(--a), 0 0 34px 0 var(--a-60); } }
/* posts */
html[data-ann="broadcast"] .msg.ann-msg .bubble { padding: 0 0 14px; overflow: hidden; border-radius: var(--r-lg) !important; border: 1px solid var(--line-2);
  background: var(--solid); box-shadow: var(--shadow); }
html[data-ann="broadcast"] .msg.ann-msg .bubble::before { content: "LIVE \00a0\2022\00a0 ANNOUNCEMENT"; display: block; margin-bottom: 12px; padding: 8px 12px 8px 28px;
  font: 800 11px/1.2 var(--display); letter-spacing: .14em; color: #fff;
  background: radial-gradient(circle 3.5px at 14px 50%, #ff2d4a 92%, transparent) no-repeat, linear-gradient(90deg, color-mix(in oklab, var(--a) 74%, #000), color-mix(in oklab, var(--a2) 62%, #000)); }
html[data-ann="broadcast"] .msg.ann-msg .bubble > * { margin-left: 14px; margin-right: 14px; }
html[data-ann="broadcast"] .msg.ann-msg .bubble .body { border-left: 4px solid var(--a); padding-left: 10px; font-weight: 500; }

/* =====================================================================
   NEON: a neon-tube sign that flickers on when there's something new
   ===================================================================== */
html[data-ann="neon"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  --fg: #f4f1ff; --mfg: rgba(240,236,255,.74); --dim: rgba(240,236,255,.5); --hi: #fff; --tint: 255,255,255; --line: rgba(255,255,255,.1); --line-2: rgba(255,255,255,.16);
  --an-tube: color-mix(in oklab, var(--a) 60%, #fff); --an-tube2: color-mix(in oklab, var(--a2) 60%, #fff); --an-ink: var(--an-tube);
  color: var(--fg); background: radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--a) 18%, #0b0913), #07060b 70%);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="neon"] .glass.ann:not(.flat) { padding: 20px; border-radius: var(--r-xl); border: 2px solid var(--an-tube);
  box-shadow: 0 0 3px var(--a), 0 0 14px var(--a-60), 0 0 36px -8px var(--a-60), inset 0 0 12px var(--a-45); }
html[data-ann="neon"] .ann .bloom { display: none; }
html[data-ann="neon"] .ann::before { content: ""; position: absolute; inset: 7px; z-index: 1; pointer-events: none; border-radius: max(4px, calc(var(--r-xl) - 7px));
  border: 1.5px solid var(--an-tube2); box-shadow: 0 0 8px var(--a2-45), inset 0 0 8px var(--a2-20); opacity: .7; }
html[data-ann="neon"] .ann .glyph { background: transparent; color: var(--an-tube); border: 1.5px solid var(--an-tube);
  box-shadow: 0 0 10px var(--a-60), inset 0 0 8px var(--a-45); filter: drop-shadow(0 0 3px var(--a)); }
html[data-ann="neon"] .ann .label { font: 700 15px/1.2 var(--display); letter-spacing: .12em; color: color-mix(in oklab, var(--a) 22%, #fff);
  text-shadow: 0 0 2px #fff, 0 0 8px var(--a), 0 0 18px var(--a), 0 0 30px var(--a-60); }
html[data-ann="neon"] .ann .new { background: transparent; color: #fff; border: 1.5px solid var(--an-tube2); text-shadow: 0 0 6px var(--a2);
  box-shadow: 0 0 10px var(--a2-45), inset 0 0 6px var(--a2-45); }
html[data-ann="neon"] .ann .btn { background: transparent; color: #fff; border: 1.5px solid var(--an-tube); text-shadow: 0 0 6px var(--a);
  box-shadow: 0 0 10px var(--a-45), inset 0 0 6px var(--a-45); }
html[data-ann="neon"] .glass.ann.unread:not(.flat) { animation: ne-buzz 3.2s linear infinite; }
html[data-ann="neon"] .ann.unread :is(.label, .glyph) { animation: ne-flick 3.2s linear infinite; }
html[data-ann="neon"] .ann.unread::before { opacity: 1; animation: ne-flick 3.2s linear infinite .5s; }
html[data-ann="neon"] .ann.unread .new { animation: ne-flick 1.7s linear infinite .3s; }
@keyframes ne-flick { 0%, 5%, 8.5%, 12%, 46%, 49%, 100% { opacity: 1; } 6.5%, 10%, 47.5% { opacity: .15; } }
@keyframes ne-buzz {
  0%, 5%, 8.5%, 100% { box-shadow: 0 0 4px var(--a), 0 0 18px var(--a), 0 0 46px -6px var(--a-60), inset 0 0 16px var(--a-45); }
  6.5% { box-shadow: 0 0 1px var(--a), 0 0 4px var(--a-45), 0 0 0 0 transparent, inset 0 0 2px var(--a-20); }
  50% { box-shadow: 0 0 6px var(--a), 0 0 26px var(--a), 0 0 64px -4px var(--a-60), inset 0 0 22px var(--a-60); } }
/* posts */
html[data-ann="neon"] .msg.ann-msg .bubble { border: 2px solid var(--an-tube); border-radius: var(--r-lg) !important;
  box-shadow: 0 0 3px var(--a), 0 0 14px var(--a-45), inset 0 0 10px var(--a-45); }
html[data-ann="neon"] .msg.ann-msg .bubble::before { content: "Announcement"; display: block; margin-bottom: 8px; font: 700 12px/1.2 var(--display);
  letter-spacing: .16em; text-transform: uppercase; color: color-mix(in oklab, var(--a) 22%, #fff); text-shadow: 0 0 2px #fff, 0 0 8px var(--a), 0 0 18px var(--a); }

/* =====================================================================
   MARQUEE: a cinema marquee with chasing bulbs round the edge
   ===================================================================== */
html[data-ann="marquee"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  --an-frame: color-mix(in oklab, var(--a) 26%, #170d07); --an-lamp: #fff7d6; --an-lamp2: color-mix(in oklab, var(--a) 25%, #ffcc55);
  --an-halo: color-mix(in oklab, var(--a) 40%, rgba(255,190,70,.5)); }
html[data-ann="marquee"] .glass.ann:not(.flat) { overflow: visible; padding: 16px 18px; border: 14px solid var(--an-frame); border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--a) 8%, var(--solid)), var(--solid)) padding-box;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.35), inset 0 6px 16px -10px rgba(0,0,0,.6), 0 18px 34px -18px rgba(0,0,0,.6), 0 0 28px -10px var(--an-halo);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="marquee"] .ann .bloom { display: none; }
html[data-ann="marquee"] .ann::before, html[data-ann="marquee"] .ann::after { content: ""; position: absolute; inset: -14px; z-index: 3; pointer-events: none;
  border-radius: 12px; padding: 14px; transform: none; background-size: 28px 28px; background-repeat: round;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
html[data-ann="marquee"] .ann::before { background-image:
  radial-gradient(circle at 7px 7px, var(--an-lamp) 0 2px, var(--an-lamp2) 3.2px, var(--an-halo) 4.4px, transparent 5.6px),
  radial-gradient(circle at 21px 21px, var(--an-lamp) 0 2px, var(--an-lamp2) 3.2px, var(--an-halo) 4.4px, transparent 5.6px);
  animation: mq-lamp 2.6s steps(1) infinite; }
html[data-ann="marquee"] .ann::after { background-image:
  radial-gradient(circle at 21px 7px, var(--an-lamp) 0 2px, var(--an-lamp2) 3.2px, var(--an-halo) 4.4px, transparent 5.6px),
  radial-gradient(circle at 7px 21px, var(--an-lamp) 0 2px, var(--an-lamp2) 3.2px, var(--an-halo) 4.4px, transparent 5.6px);
  animation: mq-lamp 2.6s steps(1) infinite -1.3s; }
html[data-ann="marquee"] .ann .hd { padding-bottom: 12px; border-bottom: 1px dashed var(--line-2); }
html[data-ann="marquee"] .ann .glyph { border-radius: 50%; background: var(--an-frame); color: var(--an-lamp);
  box-shadow: 0 0 0 2px var(--an-lamp2), 0 0 16px -2px var(--an-halo); }
html[data-ann="marquee"] .ann .label { font: 800 16px/1.1 var(--display); letter-spacing: .16em; color: var(--fg); text-transform: uppercase; }
html[data-ann="marquee"] .ann .label::before { content: "Now showing"; display: block; margin-bottom: 4px; font: 700 10px/1 var(--body); letter-spacing: .3em; color: var(--an-ink); }
html[data-ann="marquee"] .ann .new { border-radius: 4px; background: var(--an-lamp2); color: #2a1606; box-shadow: 0 0 14px var(--an-halo); }
html[data-ann="marquee"] .ann .btn { background: var(--an-frame); color: var(--an-lamp); border: 1px solid var(--an-lamp2); box-shadow: 0 0 12px -4px var(--an-halo); }
html[data-ann="marquee"] .glass.ann.unread:not(.flat) { box-shadow: 0 0 0 1px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.35), inset 0 6px 16px -10px rgba(0,0,0,.6), 0 18px 34px -18px rgba(0,0,0,.6), 0 0 40px -4px var(--an-halo); }
html[data-ann="marquee"] .ann.unread::before { animation: mq-lamp .55s steps(1) infinite; }
html[data-ann="marquee"] .ann.unread::after { animation: mq-lamp .55s steps(1) infinite -.275s; }
html[data-ann="marquee"] .ann.unread .new { animation: ann-pop 1.1s ease-in-out infinite; }
@keyframes mq-lamp { 0% { opacity: 1; } 50% { opacity: .22; } }
/* posts */
html[data-ann="marquee"] .msg.ann-msg .bubble { border: 10px solid var(--an-frame); border-radius: 10px !important;
  background: linear-gradient(180deg, color-mix(in oklab, var(--a) 8%, var(--solid)), var(--solid)) padding-box; box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 0 24px -10px var(--an-halo); }
html[data-ann="marquee"] .msg.ann-msg .bubble::before { content: ""; position: absolute; inset: -10px; pointer-events: none; border-radius: 10px; padding: 10px;
  background: radial-gradient(circle at 5px 5px, var(--an-lamp) 0 1.5px, var(--an-lamp2) 2.4px, var(--an-halo) 3.2px, transparent 4.2px) 0 0 / 14px 14px round;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* =====================================================================
   PIXEL: an 8-bit game text box with a blinking arrow
   ===================================================================== */
html[data-ann="pixel"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  --an-px: "Silkscreen", "Press Start 2P", "VT323", ui-monospace, "Courier New", monospace;
  --an-pxb: 0 -4px 0 0 var(--fg), 0 4px 0 0 var(--fg), -4px 0 0 0 var(--fg), 4px 0 0 0 var(--fg); }
html[data-ann="pixel"] .glass.ann:not(.flat) { padding: 20px 20px 26px; border: 0; border-radius: 0; margin: 4px;
  background: repeating-linear-gradient(0deg, rgba(var(--tint),.03) 0 2px, transparent 2px 4px), var(--solid);
  box-shadow: var(--an-pxb), inset 0 0 0 3px var(--solid), inset 0 0 0 5px var(--a-60); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="pixel"] .ann .bloom { display: none; }
html[data-ann="pixel"] .ann .glyph { width: 40px; height: 40px; border-radius: 0; background: var(--a); color: #fff; box-shadow: 4px 4px 0 0 rgba(var(--tint),.22); }
html[data-ann="pixel"] .ann .label { font: 700 12px/1.3 var(--an-px); letter-spacing: .06em; color: var(--an-ink); }
html[data-ann="pixel"] .ann .hd .hint, html[data-ann="pixel"] .ann .row .hint { font: 11.5px/1.4 var(--an-mono); }
html[data-ann="pixel"] .ann .new { border-radius: 0; background: var(--a); color: #fff; font: 700 10px/1 var(--an-px); padding: 5px 6px;
  box-shadow: 0 -2px 0 0 var(--fg), 0 2px 0 0 var(--fg), -2px 0 0 0 var(--fg), 2px 0 0 0 var(--fg); }
html[data-ann="pixel"] .ann .ann-body { font: 14px/1.6 var(--an-mono); }
html[data-ann="pixel"] .ann .btn { border: 0; border-radius: 0; background: transparent; color: var(--fg); font: 700 10.5px/1 var(--an-px); letter-spacing: .04em;
  text-transform: uppercase; padding: 7px 9px; box-shadow: 0 -2px 0 0 var(--fg), 0 2px 0 0 var(--fg), -2px 0 0 0 var(--fg), 2px 0 0 0 var(--fg); }
html[data-ann="pixel"] .ann .row::after { content: "\25BC"; position: absolute; right: 50%; bottom: -21px; font-size: 10px; line-height: 1; color: var(--an-ink); }
html[data-ann="pixel"] .glass.ann.unread:not(.flat) { animation: px-flash 1s steps(1) infinite; }
html[data-ann="pixel"] .ann.unread .row::after { animation: px-blink .8s steps(1) infinite; }
html[data-ann="pixel"] .ann.unread .glyph { animation: px-bob .8s steps(1) infinite; }
html[data-ann="pixel"] .ann.unread .new { animation: px-blink .8s steps(1) infinite .4s; }
@keyframes px-blink { 50% { opacity: 0; } }
@keyframes px-bob { 50% { transform: translateY(-4px); } }
@keyframes px-flash { 50% { box-shadow: 0 -4px 0 0 var(--a), 0 4px 0 0 var(--a), -4px 0 0 0 var(--a), 4px 0 0 0 var(--a), inset 0 0 0 3px var(--solid), inset 0 0 0 5px var(--fg); } }
/* posts */
html[data-ann="pixel"] .msg.ann-msg .bubble { margin: 4px; border: 0; border-radius: 0 !important; background: var(--solid);
  box-shadow: var(--an-pxb), inset 0 0 0 3px var(--solid), inset 0 0 0 5px var(--a-60); padding: 16px 18px; }
html[data-ann="pixel"] .msg.ann-msg .bubble::before { content: "\25B6  Announcement"; display: block; margin-bottom: 8px; font: 700 11px/1.3 var(--an-px);
  letter-spacing: .06em; text-transform: uppercase; color: var(--an-ink); white-space: pre; }
html[data-ann="pixel"] .msg.ann-msg .bubble .body { font: 14px/1.6 var(--an-mono); }

/* =====================================================================
   TERMINAL: a console window with a $ prompt and a blinking cursor
   ===================================================================== */
html[data-ann="terminal"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  --fg: #e6edf3; --mfg: #9aa4b2; --dim: #6e7681; --hi: #fff; --tint: 255,255,255; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --an-ink: color-mix(in oklab, var(--a) 55%, #fff);
  --an-dots: radial-gradient(circle 5.5px at 6px 6px, #ff5f57 92%, transparent), radial-gradient(circle 5.5px at 23px 6px, #febc2e 92%, transparent), radial-gradient(circle 5.5px at 40px 6px, #28c840 92%, transparent);
  color: var(--fg); border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, color-mix(in oklab, var(--a) 7%, #0e1117), #0a0c10);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.35); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="terminal"] .glass.ann:not(.flat) { padding: 0 0 14px; border-radius: 12px; }
html[data-ann="terminal"] .ann .bloom, html[data-ann="terminal"] .ann .glyph { display: none; }
html[data-ann="terminal"] .ann .hd { gap: 10px; padding: 9px 12px; background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.08); }
html[data-ann="terminal"] .ann .hd::before { content: ""; flex: none; width: 46px; height: 12px; background: var(--an-dots); }
html[data-ann="terminal"] .ann .hd .grow { display: flex; align-items: baseline; gap: 8px; }
html[data-ann="terminal"] .ann .label { font: 600 12px/1.2 var(--an-mono); text-transform: lowercase; letter-spacing: 0; color: var(--fg); white-space: nowrap; }
html[data-ann="terminal"] .ann .label::before { content: "~/"; color: var(--mfg); }
html[data-ann="terminal"] .ann .hd .hint { font: 11px/1.2 var(--an-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ann="terminal"] .ann .new { font: 700 10px/1 var(--an-mono); border-radius: 3px; padding: 4px 6px; background: var(--an-ink); color: #0a0c10; box-shadow: none; }
html[data-ann="terminal"] .ann .ann-img { width: calc(100% - 28px); margin: 12px 14px 0; border-radius: 6px; }
html[data-ann="terminal"] .ann .ann-body { margin: 12px 14px 0; font: 13.5px/1.6 var(--an-mono); color: var(--fg); -webkit-line-clamp: 5; }
html[data-ann="terminal"] .ann .ann-body::before { content: "$ announce --latest"; display: block; width: fit-content; color: var(--an-ink); font-weight: 700; }
html[data-ann="terminal"] .ann .row { margin: 10px 14px 0; }
html[data-ann="terminal"] .ann .row .hint { font: 12px/1.3 var(--an-mono); color: var(--mfg); }
html[data-ann="terminal"] .ann .row .hint::before { content: "$ "; color: var(--an-ink); }
html[data-ann="terminal"] .ann .row .hint::after { content: ""; display: inline-block; width: 7px; height: 14px; margin-left: 3px; vertical-align: -2px; background: var(--an-ink); opacity: .45; }
html[data-ann="terminal"] .ann .btn { font: 600 11.5px/1 var(--an-mono); background: transparent; color: var(--an-ink); border: 1px solid color-mix(in oklab, var(--an-ink) 50%, transparent); border-radius: 4px; }
html[data-ann="terminal"] .glass.ann.unread:not(.flat) { border-color: color-mix(in oklab, var(--an-ink) 60%, transparent); animation: tm-glow 2.4s ease-in-out infinite; }
html[data-ann="terminal"] .ann.unread .row .hint::after { opacity: 1; animation: tm-blink 1s steps(1) infinite; }
html[data-ann="terminal"] .ann.unread .ann-body::before { animation: tm-type 5s steps(19) infinite; }
html[data-ann="terminal"] .ann.unread .new { animation: tm-blink 1s steps(1) infinite .5s; }
@keyframes tm-blink { 50% { opacity: 0; } }
@keyframes tm-type { 0% { clip-path: inset(0 100% 0 0); } 30%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes tm-glow { 50% { box-shadow: 0 18px 40px -20px rgba(0,0,0,.7), 0 0 0 1px var(--a-45), 0 0 30px -6px var(--a-60); } }
/* posts */
html[data-ann="terminal"] .msg.ann-msg .bubble { padding: 0 14px 14px; border-radius: 10px !important; }
html[data-ann="terminal"] .msg.ann-msg .bubble::before { content: "announcement.log"; display: block; margin: 0 -14px 12px; padding: 7px 12px 7px 66px;
  font: 600 11.5px/1.2 var(--an-mono); color: var(--mfg); border-bottom: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(circle 5px at 18px 50%, #ff5f57 92%, transparent), radial-gradient(circle 5px at 34px 50%, #febc2e 92%, transparent), radial-gradient(circle 5px at 50px 50%, #28c840 92%, transparent), rgba(255,255,255,.05); }
html[data-ann="terminal"] .msg.ann-msg .bubble .body { font: 14px/1.6 var(--an-mono); }
html[data-ann="terminal"] .msg.ann-msg .bubble .body::before { content: "$ "; color: var(--an-ink); font-weight: 700; }

/* =====================================================================
   NEWSPAPER: a masthead, serif headline and an EXTRA stamp
   ===================================================================== */
html[data-ann="newspaper"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  --an-paper: color-mix(in oklab, var(--solid) 88%, #c8b083); --an-serif: "Fraunces", "Playfair Display", "DM Serif Display", ui-serif, Georgia, "Times New Roman", serif;
  background: var(--an-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="newspaper"] .glass.ann:not(.flat) { padding: 12px 18px 16px; border-radius: 3px; border: 1px solid var(--line-2);
  box-shadow: 0 16px 30px -22px rgba(0,0,0,.6); }
html[data-ann="newspaper"] .ann .bloom, html[data-ann="newspaper"] .ann .glyph { display: none; }
html[data-ann="newspaper"] .ann .hd { display: block; text-align: center; padding: 0 0 8px; border-bottom: 4px double var(--fg); }
html[data-ann="newspaper"] .ann .hd::before { content: "\2605 \00a0 Community Edition\00a0 \2605"; display: block; padding-bottom: 6px; margin-bottom: 7px;
  border-bottom: 1px solid var(--fg); font: 700 9.5px/1 var(--body); letter-spacing: .26em; text-transform: uppercase; color: var(--mfg); }
html[data-ann="newspaper"] .ann .label { font: 900 24px/1.05 var(--an-serif); letter-spacing: -.01em; text-transform: capitalize; color: var(--fg); }
html[data-ann="newspaper"] .ann .hd .hint { margin-top: 5px; font: italic 12.5px/1.3 var(--an-serif); color: var(--mfg); }
html[data-ann="newspaper"] .ann .new { position: absolute; top: -6px; right: -10px; transform: rotate(12deg); padding: 3px 7px; border-radius: 3px;
  border: 2px solid var(--an-ink); background: var(--an-paper); color: var(--an-ink); box-shadow: none; font: 900 11px/1 var(--an-serif); letter-spacing: .12em; }
html[data-ann="newspaper"] .ann .new::before { content: "Extra! "; }
html[data-ann="newspaper"] .ann .ann-img { border-radius: 0; filter: grayscale(.25) contrast(1.05); }
html[data-ann="newspaper"] .ann .ann-body { margin-top: 12px; font: 15.5px/1.5 var(--an-serif); color: var(--fg); text-align: justify; hyphens: auto; }
html[data-ann="newspaper"] .ann .ann-body::first-letter { font: 900 2.2em/.9 var(--an-serif); padding-right: 1px; color: var(--an-ink); }
html[data-ann="newspaper"] .ann .row { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--fg); }
html[data-ann="newspaper"] .ann .row .hint { font: italic 12.5px/1.3 var(--an-serif); }
html[data-ann="newspaper"] .ann .btn { background: transparent; color: var(--fg); border: 1px solid var(--fg); border-radius: 0; font: 700 10.5px/1 var(--body);
  letter-spacing: .14em; text-transform: uppercase; padding: 7px 10px; }
html[data-ann="newspaper"] .glass.ann.unread:not(.flat) { box-shadow: inset 0 4px 0 var(--a), 0 16px 30px -22px rgba(0,0,0,.6), 0 0 0 1px var(--a-30), 0 12px 34px -16px var(--a-60); padding-top: 16px; }
html[data-ann="newspaper"] .ann.unread .new { animation: np-stamp 3.2s cubic-bezier(.2,.9,.3,1.3) infinite; }
@keyframes np-stamp { 0% { transform: rotate(12deg) scale(2.2); opacity: 0; } 10% { transform: rotate(12deg) scale(.92); opacity: 1; box-shadow: 0 0 0 0 var(--a-45); }
  16% { transform: rotate(12deg) scale(1); } 30% { box-shadow: 0 0 0 10px transparent; } 85% { transform: rotate(12deg) scale(1); opacity: 1; } 100% { transform: rotate(12deg) scale(1); opacity: 1; } }
/* posts */
html[data-ann="newspaper"] .msg.ann-msg .bubble { border: 1px solid var(--line-2); border-radius: 3px !important; padding: 12px 16px 14px; box-shadow: 0 14px 26px -22px rgba(0,0,0,.6); }
html[data-ann="newspaper"] .msg.ann-msg .bubble::before { content: "The Announcement"; display: block; text-align: center; margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 4px double var(--fg); font: 900 19px/1.1 var(--an-serif); color: var(--fg); }
html[data-ann="newspaper"] .msg.ann-msg .bubble .body { font: 15.5px/1.55 var(--an-serif); }
html[data-ann="newspaper"] .msg.ann-msg .bubble .body::first-letter { font: 900 2.1em/.9 var(--an-serif); padding-right: 1px; color: var(--an-ink); }

/* =====================================================================
   STICKY: a taped-up sticky note, slightly tilted
   ===================================================================== */
html[data-ann="sticky"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  --an-note: color-mix(in oklab, var(--a) 22%, #fff9ec); --fg: #2b2414; --mfg: rgba(43,36,20,.72); --dim: rgba(43,36,20,.5); --hi: #000; --tint: 0,0,0;
  --line: rgba(0,0,0,.1); --line-2: rgba(0,0,0,.16); --an-ink: color-mix(in oklab, var(--a) 72%, #000);
  --an-hand: "Caveat", "Kalam", "Patrick Hand", "Segoe Print", "Bradley Hand", "Noteworthy", "Chalkboard SE", "Comic Sans MS", cursive;
  color: var(--fg); background: linear-gradient(172deg, color-mix(in oklab, var(--an-note) 94%, #fff), var(--an-note) 40%, color-mix(in oklab, var(--an-note) 95%, #000));
  -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="sticky"] .glass.ann:not(.flat) { overflow: visible; margin: 8px 4px 4px; padding: 24px 18px 18px; border: 0; border-radius: 2px 2px 22px 2px / 2px 2px 10px 2px;
  transform: rotate(-1.2deg); box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 16px 22px -14px rgba(0,0,0,.55), inset 0 -12px 18px -16px rgba(0,0,0,.3); }
html[data-ann="sticky"] .ann .bloom { display: none; }
html[data-ann="sticky"] .ann::before { content: ""; position: absolute; z-index: 3; top: -12px; left: 50%; width: 96px; height: 26px; transform: translateX(-50%) rotate(-4deg);
  background: linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.45)); border-left: 1px dashed rgba(0,0,0,.1); border-right: 1px dashed rgba(0,0,0,.1);
  box-shadow: 0 1px 3px rgba(0,0,0,.18); pointer-events: none; }
html[data-ann="sticky"] .ann .glyph { width: 32px; height: 32px; background: transparent; color: var(--an-ink); box-shadow: none; }
html[data-ann="sticky"] .ann .label { font: 700 22px/1 var(--an-hand); text-transform: none; letter-spacing: 0; color: var(--fg); }
html[data-ann="sticky"] .ann .hd .hint { margin-top: 3px; }
html[data-ann="sticky"] .ann .new { background: transparent; color: var(--an-ink); border: 2.5px solid var(--an-ink); border-radius: 50% 45% 55% 40% / 55% 45% 50% 45%;
  transform: rotate(-8deg); font: 700 16px/1 var(--an-hand); letter-spacing: 0; padding: 5px 10px; box-shadow: none; }
html[data-ann="sticky"] .ann .ann-body { font-size: 15px; color: var(--fg); }
html[data-ann="sticky"] .ann .btn { background: transparent; border: 0; padding: 4px 2px; color: var(--an-ink); box-shadow: none; font-weight: 800;
  text-decoration: underline 2px; text-underline-offset: 4px; }
html[data-ann="sticky"] .glass.ann.unread:not(.flat) { animation: st-wig 3s ease-in-out infinite; }
html[data-ann="sticky"] .ann.unread .new { animation: st-new 1.5s ease-in-out infinite; }
@keyframes st-wig { 0%, 64%, 100% { transform: rotate(-1.2deg); } 70% { transform: rotate(1.6deg) translateY(-2px); } 76% { transform: rotate(-3deg); } 82% { transform: rotate(.8deg); } 90% { transform: rotate(-1.8deg); } }
@keyframes st-new { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(-3deg) scale(1.14); } }
/* posts */
html[data-ann="sticky"] .msg.ann-msg .bubble { border: 0; border-radius: 2px 2px 18px 2px / 2px 2px 8px 2px !important; padding: 20px 16px 16px; margin-top: 8px;
  transform: rotate(-.4deg); box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 14px 20px -14px rgba(0,0,0,.5); }
html[data-ann="sticky"] .msg.ann-msg .bubble::before { content: ""; position: absolute; top: -11px; left: 26px; width: 80px; height: 22px; transform: rotate(-5deg);
  background: linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.45)); box-shadow: 0 1px 3px rgba(0,0,0,.18); }

/* =====================================================================
   LUXE: a thin gold double frame with ornamental corners
   ===================================================================== */
html[data-ann="luxe"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  --an-gold: color-mix(in oklab, var(--a) 25%, #e2c47c); --an-gold2: color-mix(in oklab, var(--a) 15%, #fff1c8);
  --an-serif: "Cinzel", "Cormorant Garamond", "Playfair Display", ui-serif, Georgia, serif; --an-ink: var(--an-gold);
  background: radial-gradient(130% 90% at 50% -10%, color-mix(in oklab, var(--a) 14%, var(--solid)), var(--solid) 60%); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-mode="light"][data-ann="luxe"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) { --an-gold: color-mix(in oklab, var(--a) 25%, #8a6a1e); --an-gold2: color-mix(in oklab, var(--a) 15%, #d9b45a); }
html[data-ann="luxe"] .glass.ann:not(.flat) { padding: 26px 24px 22px; border-radius: 4px; border: 1px solid var(--an-gold); text-align: center;
  box-shadow: 0 22px 40px -26px rgba(0,0,0,.7), inset 0 0 0 5px transparent, inset 0 0 0 6px color-mix(in oklab, var(--an-gold) 60%, transparent); }
html[data-ann="luxe"] .ann .bloom { display: none; }
html[data-ann="luxe"] .ann .ann-deco { display: block; }
html[data-ann="luxe"] .ann .ann-deco i:nth-child(-n+4) { display: block; width: 20px; height: 20px; border: 0 solid var(--an-gold); }
html[data-ann="luxe"] .ann .ann-deco i:nth-child(-n+4)::after { content: ""; position: absolute; width: 6px; height: 6px; background: var(--an-gold); transform: rotate(45deg); }
html[data-ann="luxe"] .ann .ann-deco i:nth-child(1) { top: 11px; left: 11px; border-top-width: 1.5px; border-left-width: 1.5px; }
html[data-ann="luxe"] .ann .ann-deco i:nth-child(2) { top: 11px; right: 11px; border-top-width: 1.5px; border-right-width: 1.5px; }
html[data-ann="luxe"] .ann .ann-deco i:nth-child(3) { bottom: 11px; left: 11px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
html[data-ann="luxe"] .ann .ann-deco i:nth-child(4) { bottom: 11px; right: 11px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
html[data-ann="luxe"] .ann .ann-deco i:nth-child(1)::after { top: 4px; left: 4px; }
html[data-ann="luxe"] .ann .ann-deco i:nth-child(2)::after { top: 4px; right: 4px; }
html[data-ann="luxe"] .ann .ann-deco i:nth-child(3)::after { bottom: 4px; left: 4px; }
html[data-ann="luxe"] .ann .ann-deco i:nth-child(4)::after { bottom: 4px; right: 4px; }
html[data-ann="luxe"] .ann .hd { flex-direction: column; gap: 8px; }
html[data-ann="luxe"] .ann .hd::after { content: ""; width: 64%; height: 1px; margin-top: 4px; background: linear-gradient(90deg, transparent, var(--an-gold), transparent); }
html[data-ann="luxe"] .ann .glyph { width: 46px; height: 46px; border-radius: 50%; background: transparent; color: var(--an-gold);
  box-shadow: inset 0 0 0 1px var(--an-gold), 0 0 0 4px transparent, 0 0 0 5px color-mix(in oklab, var(--an-gold) 45%, transparent); }
html[data-ann="luxe"] .ann .label { font: 600 12.5px/1.4 var(--an-serif); letter-spacing: .3em; color: var(--an-gold); }
html[data-ann="luxe"] .ann .hd .hint { margin-top: 3px; font: italic 13.5px/1.3 "Cormorant Garamond", ui-serif, Georgia, serif; color: var(--mfg); }
html[data-ann="luxe"] .ann .new { border-radius: 0; padding: 4px 10px 4px 13px; letter-spacing: .3em; color: #1b1407;
  background: linear-gradient(135deg, var(--an-gold2), var(--an-gold)); box-shadow: 0 0 18px -6px var(--an-gold); }
html[data-ann="luxe"] .ann .ann-img { border-radius: 2px; box-shadow: 0 0 0 1px var(--an-gold); }
html[data-ann="luxe"] .ann .ann-body { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--fg); }
html[data-ann="luxe"] .ann .row { flex-direction: column; gap: 10px; margin-top: 16px; }
html[data-ann="luxe"] .ann .row .hint { font: italic 13px/1.3 "Cormorant Garamond", ui-serif, Georgia, serif; }
html[data-ann="luxe"] .ann .btn { background: transparent; color: var(--an-gold); border: 1px solid var(--an-gold); border-radius: 0; box-shadow: none;
  font: 600 10.5px/1 var(--an-serif); letter-spacing: .22em; text-transform: uppercase; padding: 9px 16px; }
html[data-ann="luxe"] .glass.ann.unread:not(.flat) { animation: lx-glow 2.8s ease-in-out infinite; }
html[data-ann="luxe"] .ann.unread::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(105deg, transparent 32%, color-mix(in oklab, var(--an-gold2) 28%, transparent) 46%, rgba(255,255,255,.3) 50%, color-mix(in oklab, var(--an-gold2) 28%, transparent) 54%, transparent 68%);
  animation: lx-sweep 3.6s ease-in-out infinite; }
html[data-ann="luxe"] .ann.unread .ann-deco i { animation: lx-glint 2.8s ease-in-out infinite; }
html[data-ann="luxe"] .ann.unread .new { animation: lx-glint 2.8s ease-in-out infinite; }
@keyframes lx-sweep { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
@keyframes lx-glint { 50% { filter: drop-shadow(0 0 6px var(--an-gold)) brightness(1.25); } }
@keyframes lx-glow { 50% { box-shadow: 0 22px 40px -26px rgba(0,0,0,.7), inset 0 0 0 5px transparent, inset 0 0 0 6px var(--an-gold), 0 0 34px -8px var(--an-gold); } }
/* posts */
html[data-ann="luxe"] .msg.ann-msg .bubble { border: 1px solid var(--an-gold); border-radius: 3px !important; padding: 16px 20px 18px;
  box-shadow: 0 18px 34px -26px rgba(0,0,0,.7), inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in oklab, var(--an-gold) 55%, transparent); }
html[data-ann="luxe"] .msg.ann-msg .bubble::before { content: "\2726 \00a0 Announcement\00a0 \2726"; display: block; text-align: center; margin-bottom: 10px; padding-bottom: 8px;
  font: 600 11.5px/1.3 var(--an-serif); letter-spacing: .3em; text-transform: uppercase; color: var(--an-gold);
  background: linear-gradient(90deg, transparent, var(--an-gold), transparent) bottom / 70% 1px no-repeat; }

/* =====================================================================
   TICKET: an admission ticket with a perforated stub
   ===================================================================== */
html[data-ann="ticket"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  background: radial-gradient(140% 120% at 0% 0%, color-mix(in oklab, var(--a) 22%, var(--solid)), color-mix(in oklab, var(--a2) 12%, var(--solid)));
  -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="ticket"] .glass.ann:not(.flat) { --an-stub: 46px; padding: 18px calc(var(--an-stub) + 16px) 18px 22px; border: 0; border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--a-30);
  -webkit-mask: radial-gradient(circle 10px at calc(100% - var(--an-stub)) 0, #0000 96%, #000), radial-gradient(circle 10px at calc(100% - var(--an-stub)) 100%, #0000 96%, #000), radial-gradient(circle 9px at 0 50%, #0000 96%, #000);
  -webkit-mask-composite: source-in, source-in;
  mask: radial-gradient(circle 10px at calc(100% - var(--an-stub)) 0, #0000 96%, #000), radial-gradient(circle 10px at calc(100% - var(--an-stub)) 100%, #0000 96%, #000), radial-gradient(circle 9px at 0 50%, #0000 96%, #000);
  mask-composite: intersect; }
html[data-ann="ticket"] .ann .bloom { display: none; }
html[data-ann="ticket"] .ann::before { content: "Admit one"; position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: var(--an-stub); display: grid; place-items: center;
  writing-mode: vertical-rl; font: 800 11px/1 var(--display); letter-spacing: .32em; text-transform: uppercase; color: var(--an-ink);
  border-left: 2px dashed var(--a-45); background: var(--a-12); }
html[data-ann="ticket"] .ann .hd { padding-bottom: 14px; border-bottom: 2px dashed var(--a-30); }
html[data-ann="ticket"] .ann .glyph { border-radius: 50%; box-shadow: 0 0 0 3px var(--solid), 0 0 0 4px var(--a-45); }
html[data-ann="ticket"] .ann .label { font: 800 14px/1.15 var(--display); letter-spacing: .12em; color: var(--fg); }
html[data-ann="ticket"] .ann .hd .hint { font: 11px/1.3 var(--an-mono); letter-spacing: .04em; margin-top: 2px; }
html[data-ann="ticket"] .ann .new { background: transparent; color: var(--an-ink); border: 2px solid var(--an-ink); border-radius: 4px; transform: rotate(-8deg); box-shadow: none; letter-spacing: .2em; }
html[data-ann="ticket"] .ann .ann-body { margin-top: 14px; }
html[data-ann="ticket"] .ann .btn { background: var(--grad); color: #fff; border: 0; border-radius: 99px; box-shadow: 0 8px 18px -10px var(--a); }
html[data-ann="ticket"] .ann.unread::before { content: "New \00b7  Admit one"; background: var(--grad); color: #fff; border-left-color: rgba(255,255,255,.7); white-space: pre; }
html[data-ann="ticket"] .ann.unread::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.25) 50%, transparent 65%); animation: lx-sweep 3s ease-in-out infinite; }
html[data-ann="ticket"] .ann.unread .new { animation: tk-stamp 1.4s ease-in-out infinite; }
html[data-ann="ticket"] .ann.unread .glyph { animation: ann-ring 2.2s ease-out infinite; }
@keyframes tk-stamp { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(-3deg) scale(1.14); } }
/* posts */
html[data-ann="ticket"] .msg.ann-msg .bubble { border: 0; border-radius: 10px !important; padding: 14px 18px 16px; box-shadow: inset 0 0 0 1px var(--a-30);
  -webkit-mask: radial-gradient(circle 8px at 0 50%, #0000 96%, #000), radial-gradient(circle 8px at 100% 50%, #0000 96%, #000); -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 8px at 0 50%, #0000 96%, #000), radial-gradient(circle 8px at 100% 50%, #0000 96%, #000); mask-composite: intersect; }
html[data-ann="ticket"] .msg.ann-msg .bubble::before { content: "Admit one \00b7  Announcement"; display: block; margin-bottom: 10px; padding-bottom: 8px; white-space: pre;
  border-bottom: 2px dashed var(--a-30); font: 800 11px/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--an-ink); }

/* =====================================================================
   COMIC: a speech bubble with halftone dots and a POW-style NEW
   ===================================================================== */
html[data-ann="comic"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  --an-paper: #fffdf5; --fg: #141414; --mfg: #3f3f46; --dim: #71717a; --hi: #000; --tint: 0,0,0; --line: rgba(0,0,0,.12); --line-2: rgba(0,0,0,.2);
  --an-ink: color-mix(in oklab, var(--a) 75%, #000); --an-pow: color-mix(in oklab, #ffd60a 84%, var(--a));
  --an-star: polygon(50% 0%, 61% 18%, 82% 9%, 79% 31%, 100% 35%, 85% 51%, 100% 67%, 78% 70%, 82% 92%, 61% 82%, 50% 100%, 39% 82%, 18% 92%, 21% 70%, 0% 67%, 15% 51%, 0% 35%, 21% 31%, 18% 9%, 39% 18%);
  color: var(--fg); background: var(--an-paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="comic"] .glass.ann:not(.flat) { overflow: visible; margin: 2px 6px 22px 0; padding: 18px 18px 16px; border: 3px solid #141414; border-radius: 26px;
  box-shadow: 6px 6px 0 var(--a); }
html[data-ann="comic"] .ann .bloom { display: none; }
html[data-ann="comic"] .ann::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle, var(--a-60) 1.4px, transparent 1.9px) 0 0 / 7px 7px;
  -webkit-mask: radial-gradient(110% 100% at 100% 0%, #000 0%, transparent 55%); mask: radial-gradient(110% 100% at 100% 0%, #000 0%, transparent 55%); }
html[data-ann="comic"] .ann .ann-deco { display: block; }
html[data-ann="comic"] .ann .ann-deco i:nth-child(1) { display: block; left: 38px; top: calc(100% - 1px); width: 34px; height: 28px; background: #141414; clip-path: polygon(0 0, 100% 0, 8% 100%); }
html[data-ann="comic"] .ann .ann-deco i:nth-child(2) { display: block; left: 43px; top: calc(100% - 3px); width: 23px; height: 20px; background: var(--an-paper); clip-path: polygon(0 0, 100% 0, 6% 100%); }
html[data-ann="comic"] .ann .glyph { width: 48px; height: 48px; border-radius: 0; background: var(--a); color: #fff; box-shadow: none; clip-path: var(--an-star); }
html[data-ann="comic"] .ann .label { font: italic 900 18px/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; color: #141414; text-shadow: 2px 2px 0 var(--a-30); }
html[data-ann="comic"] .ann .hd .hint { color: var(--mfg); font-weight: 600; }
html[data-ann="comic"] .ann .new { position: relative; z-index: 0; isolation: isolate; margin-right: 8px; padding: 6px 3px; background: none; box-shadow: none; color: #141414;
  font: italic 900 13px/1 var(--display); letter-spacing: .04em; transform: rotate(-10deg); }
html[data-ann="comic"] .ann .new::before, html[data-ann="comic"] .ann .new::after { content: ""; position: absolute; z-index: -1; clip-path: var(--an-star); }
html[data-ann="comic"] .ann .new::before { inset: -15px -16px; background: #141414; }
html[data-ann="comic"] .ann .new::after { inset: -11px -12px; background: var(--an-pow); }
html[data-ann="comic"] .ann .ann-body { font-size: 15px; font-weight: 500; color: var(--fg); }
html[data-ann="comic"] .ann .row .hint { color: var(--mfg); font-weight: 600; }
html[data-ann="comic"] .ann .btn { background: #141414; color: #fff; border: 0; border-radius: 10px; box-shadow: 3px 3px 0 var(--a);
  font: italic 800 12px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
html[data-ann="comic"] .glass.ann.unread:not(.flat) { animation: cm-shake 2.6s ease-in-out infinite; }
html[data-ann="comic"] .ann.unread .new { animation: cm-pow 1.3s cubic-bezier(.3,1.6,.5,1) infinite; }
html[data-ann="comic"] .ann.unread .glyph { animation: cm-spin 2.6s ease-in-out infinite; }
@keyframes cm-shake { 0%, 80%, 100% { transform: none; } 83% { transform: translate(-2px, 1px) rotate(-.6deg); } 86% { transform: translate(2px, -1px) rotate(.6deg); }
  89% { transform: translate(-2px, 0) rotate(-.4deg); } 92% { transform: translate(1px, 1px); } }
@keyframes cm-pow { 0%, 100% { transform: rotate(-10deg) scale(1); } 45% { transform: rotate(-2deg) scale(1.22); } }
@keyframes cm-spin { 0%, 70%, 100% { transform: rotate(0); } 85% { transform: rotate(36deg) scale(1.1); } }
/* posts */
html[data-ann="comic"] .msg.ann-msg .bubble { overflow: visible; margin: 2px 6px 18px 0; padding: 14px 16px; border: 2.5px solid #141414; border-radius: 22px !important;
  box-shadow: 5px 5px 0 var(--a);
  background: radial-gradient(circle, var(--a-45) 1.3px, transparent 1.8px) right top / 7px 7px no-repeat, var(--an-paper); }
html[data-ann="comic"] .msg.ann-msg .bubble::before { content: ""; position: absolute; right: 44px; top: calc(100% - 1px); width: 30px; height: 22px; background: #141414; clip-path: polygon(0 0, 100% 0, 92% 100%); }
html[data-ann="comic"] .msg.ann-msg .bubble::after { content: ""; position: absolute; right: 48.5px; top: calc(100% - 3px); width: 20px; height: 15px; background: var(--an-paper); clip-path: polygon(0 0, 100% 0, 94% 100%); }
html[data-ann="comic"] .msg.ann-msg .bubble .body { font-size: 15px; font-weight: 500; }
html[data-ann="comic"] .msg.ann-msg .bubble .body::before { content: "Announcement! "; font: italic 900 14px var(--display); text-transform: uppercase; color: var(--an-ink); }

/* =====================================================================
   CIRCUIT: a sci-fi HUD with corner brackets and a scan line
   ===================================================================== */
html[data-ann="circuit"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  --an-hud: color-mix(in oklab, var(--a) 70%, var(--hi));
  --an-brk: linear-gradient(var(--an-hud), var(--an-hud)) left top / 18px 2px, linear-gradient(var(--an-hud), var(--an-hud)) left top / 2px 18px,
    linear-gradient(var(--an-hud), var(--an-hud)) right top / 18px 2px, linear-gradient(var(--an-hud), var(--an-hud)) right top / 2px 18px,
    linear-gradient(var(--an-hud), var(--an-hud)) left bottom / 18px 2px, linear-gradient(var(--an-hud), var(--an-hud)) left bottom / 2px 18px,
    linear-gradient(var(--an-hud), var(--an-hud)) right bottom / 18px 2px, linear-gradient(var(--an-hud), var(--an-hud)) right bottom / 2px 18px;
  --an-grid: linear-gradient(var(--a-6) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, var(--a-6) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(160deg, color-mix(in oklab, var(--a) 9%, var(--solid)), var(--solid));
  background: var(--an-grid); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="circuit"] .glass.ann:not(.flat) { padding: 22px; border-radius: 2px; border: 1px solid var(--a-30); box-shadow: var(--shadow), inset 0 0 30px -14px var(--a-60); }
html[data-ann="circuit"] .ann .bloom { display: none; }
html[data-ann="circuit"] .ann::before { content: ""; position: absolute; inset: 6px; z-index: 1; pointer-events: none; background: var(--an-brk); background-repeat: no-repeat; }
html[data-ann="circuit"] .ann .glyph { width: 44px; height: 44px; border-radius: 0; box-shadow: none; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
html[data-ann="circuit"] .ann .label { font: 700 11.5px/1.3 var(--an-mono); letter-spacing: .18em; color: var(--an-hud); }
html[data-ann="circuit"] .ann .label::before { content: "// "; opacity: .6; }
html[data-ann="circuit"] .ann .hd .hint, html[data-ann="circuit"] .ann .row .hint { font: 11.5px/1.3 var(--an-mono); }
html[data-ann="circuit"] .ann .row .hint::before { content: "> "; color: var(--an-hud); }
html[data-ann="circuit"] .ann .new { font: 700 10.5px/1 var(--an-mono); border-radius: 0; background: var(--a-12); color: var(--an-hud); border: 1px solid var(--an-hud);
  box-shadow: inset 0 0 8px var(--a-30); padding: 4px 7px; }
html[data-ann="circuit"] .ann .btn { font: 700 11px/1 var(--an-mono); text-transform: uppercase; letter-spacing: .08em; border-radius: 0; background: var(--a-12);
  border: 1px solid var(--a-45); color: var(--an-hud); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
html[data-ann="circuit"] .glass.ann.unread:not(.flat) { border-color: var(--a-60); box-shadow: var(--shadow), inset 0 0 34px -12px var(--a-60), 0 0 24px -8px var(--a-60); }
html[data-ann="circuit"] .ann.unread::before { animation: ci-lock 1.6s ease-in-out infinite; }
html[data-ann="circuit"] .ann.unread::after { content: ""; position: absolute; left: 0; right: 0; top: -60px; height: 56px; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--a-12) 70%, var(--a-45) 96%, var(--an-hud) 98%, transparent); animation: ci-scan 2.6s linear infinite; }
html[data-ann="circuit"] .ann.unread .new { animation: tm-blink 1s steps(1) infinite; }
@keyframes ci-scan { from { top: -60px; } to { top: 100%; } }
@keyframes ci-lock { 0%, 100% { inset: 6px; opacity: 1; } 50% { inset: 2px; opacity: .55; } }
/* posts */
html[data-ann="circuit"] .msg.ann-msg .bubble { border: 1px solid var(--a-30); border-radius: 2px !important; padding: 18px 20px;
  background: var(--an-brk), var(--an-grid); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
  background-origin: content-box, content-box, content-box, content-box, content-box, content-box, content-box, content-box, padding-box, padding-box, padding-box;
  padding: 6px; }
html[data-ann="circuit"] .msg.ann-msg .bubble > * { margin-left: 12px; margin-right: 12px; }
html[data-ann="circuit"] .msg.ann-msg .bubble::before { content: "// announcement"; display: block; margin: 10px 12px 6px; font: 700 11px/1.3 var(--an-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--an-hud); }
html[data-ann="circuit"] .msg.ann-msg .bubble > :last-child { margin-bottom: 12px; }

/* =====================================================================
   MEGAPHONE: a bold full-colour card with a big icon and confetti
   ===================================================================== */
html[data-ann="megaphone"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  --fg: #fff; --mfg: rgba(255,255,255,.86); --dim: rgba(255,255,255,.64); --hi: #fff; --tint: 255,255,255; --line: rgba(255,255,255,.2); --line-2: rgba(255,255,255,.3);
  --an-ink: color-mix(in oklab, var(--a) 68%, #000); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2);
  background: radial-gradient(90% 70% at 100% 0%, rgba(255,255,255,.22), transparent 60%), linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16)), var(--grad);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="megaphone"] .glass.ann:not(.flat) { padding: 22px 20px 20px; border: 0; border-radius: var(--r-xl); box-shadow: 0 22px 44px -22px var(--a), inset 0 1px 0 rgba(255,255,255,.35); }
html[data-ann="megaphone"] .ann .bloom { display: none; }
html[data-ann="megaphone"] .ann::before { content: ""; position: absolute; z-index: 0; width: 230px; height: 230px; right: -84px; bottom: -120px; border-radius: 50%; pointer-events: none;
  border: 28px solid rgba(255,255,255,.1); box-shadow: 0 0 0 26px rgba(255,255,255,.05); }
html[data-ann="megaphone"] .ann .hd { gap: 14px; }
html[data-ann="megaphone"] .ann .glyph { width: 60px; height: 60px; border-radius: 20px; background: rgba(255,255,255,.2); color: #fff; transform: rotate(-10deg);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45), 0 12px 22px -12px rgba(0,0,0,.45); }
html[data-ann="megaphone"] .ann .glyph svg { width: 30px; height: 30px; }
html[data-ann="megaphone"] .ann .label { font: 900 19px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; color: #fff; }
html[data-ann="megaphone"] .ann .hd .hint { color: var(--mfg); margin-top: 3px; }
html[data-ann="megaphone"] .ann .new { background: #fff; color: var(--an-ink); text-shadow: none; font-weight: 900; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); }
html[data-ann="megaphone"] .ann .ann-body { margin-top: 16px; font-size: 16px; font-weight: 500; color: #fff; }
html[data-ann="megaphone"] .ann .row .hint { color: var(--mfg); }
html[data-ann="megaphone"] .ann .btn { background: #fff; color: var(--an-ink); border: 0; text-shadow: none; font-weight: 800; box-shadow: 0 8px 18px -10px rgba(0,0,0,.5); }
html[data-ann="megaphone"] .ann.unread .ann-deco { display: block; }
html[data-ann="megaphone"] .ann.unread .ann-deco i { display: block; top: -16px; width: 7px; height: 12px; border-radius: 1px; background: color-mix(in oklab, var(--a2) 55%, #fff); opacity: 0; animation: mg-fall 3s linear infinite; }
html[data-ann="megaphone"] .ann.unread .ann-deco i:nth-child(1) { left: 6%; animation-delay: 0s; }
html[data-ann="megaphone"] .ann.unread .ann-deco i:nth-child(2) { left: 18%; animation-delay: -1.1s; background: color-mix(in oklab, var(--a2) 35%, #fff); width: 8px; height: 8px; border-radius: 50%; }
html[data-ann="megaphone"] .ann.unread .ann-deco i:nth-child(3) { left: 31%; animation-delay: -2.2s; background: #ffe27a; }
html[data-ann="megaphone"] .ann.unread .ann-deco i:nth-child(4) { left: 44%; animation-delay: -.5s; background: color-mix(in oklab, var(--a) 40%, #fff); height: 9px; }
html[data-ann="megaphone"] .ann.unread .ann-deco i:nth-child(5) { left: 57%; animation-delay: -1.7s; background: color-mix(in oklab, var(--a) 30%, #fff); width: 8px; height: 8px; border-radius: 50%; }
html[data-ann="megaphone"] .ann.unread .ann-deco i:nth-child(6) { left: 69%; animation-delay: -2.6s; background: #ffe27a; }
html[data-ann="megaphone"] .ann.unread .ann-deco i:nth-child(7) { left: 81%; animation-delay: -.8s; background: #ffe27a; width: 6px; }
html[data-ann="megaphone"] .ann.unread .ann-deco i:nth-child(8) { left: 92%; animation-delay: -2s; background: color-mix(in oklab, var(--a2) 35%, #fff); }
html[data-ann="megaphone"] .glass.ann.unread:not(.flat) { animation: mg-glow 2s ease-in-out infinite; }
html[data-ann="megaphone"] .ann.unread .glyph { animation: mg-shout 1.4s ease-in-out infinite; }
html[data-ann="megaphone"] .ann.unread .new { animation: ann-pop 1.2s ease-in-out infinite; }
@keyframes mg-fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(280px) rotate(600deg); opacity: 0; } }
@keyframes mg-shout { 0%, 100% { transform: rotate(-10deg) scale(1); } 15% { transform: rotate(-20deg) scale(1.14); } 30% { transform: rotate(-4deg) scale(1.08); } 45% { transform: rotate(-12deg) scale(1); } }
@keyframes mg-glow { 50% { box-shadow: 0 22px 50px -16px var(--a), 0 0 0 3px var(--a-30), inset 0 1px 0 rgba(255,255,255,.35); } }
/* posts */
html[data-ann="megaphone"] .msg.ann-msg .bubble { border: 0; border-radius: var(--r-lg) !important; padding: 16px 18px; box-shadow: 0 16px 34px -20px var(--a); }
html[data-ann="megaphone"] .msg.ann-msg .bubble::before { content: "Announcement"; display: block; margin-bottom: 8px; font: 900 15px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
html[data-ann="megaphone"] .msg.ann-msg .bubble .body { font-size: 16px; font-weight: 500; }
html[data-ann="megaphone"] .msg.ann-msg .bubble :is(.body a, .mention) { color: #fff; }
html[data-ann="megaphone"] .msg.ann-msg .bubble .mention { background: rgba(255,255,255,.22); }

/* =====================================================================
   NATURE: a soft organic card with drifting leaves
   ===================================================================== */
html[data-ann="nature"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  --an-leaf: linear-gradient(135deg, color-mix(in oklab, var(--a) 60%, transparent), color-mix(in oklab, var(--a2) 40%, transparent));
  background: radial-gradient(110% 80% at 0% 0%, var(--a-12), transparent 60%), radial-gradient(90% 80% at 100% 100%, var(--a2-20), transparent 60%), var(--solid);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="nature"] .glass.ann:not(.flat) { padding: 22px 22px 20px; border: 1px solid var(--a-20); border-radius: 46px 20px 44px 24px / 30px 42px 26px 40px;
  box-shadow: 0 18px 40px -26px var(--a-60); }
html[data-ann="nature"] .ann .bloom { display: none; }
html[data-ann="nature"] .ann .ann-deco { display: block; }
html[data-ann="nature"] .ann .ann-deco i:nth-child(-n+3) { display: block; width: 56px; height: 56px; border-radius: 0 100% 0 100%; background: var(--an-leaf); opacity: .5; transform-origin: 0 100%; overflow: hidden; }
html[data-ann="nature"] .ann .ann-deco i:nth-child(-n+3)::after { content: ""; position: absolute; left: 0; top: 0; width: 141%; height: 1.5px; background: rgba(255,255,255,.5); transform: rotate(45deg); transform-origin: 0 0; }
html[data-ann="nature"] .ann .ann-deco i:nth-child(1) { top: 12px; right: 22px; width: 30px; height: 30px; transform: rotate(-35deg); opacity: .75; }
html[data-ann="nature"] .ann .ann-deco i:nth-child(2) { top: 22px; right: 10px; width: 22px; height: 22px; transform: rotate(40deg); opacity: .55; }
html[data-ann="nature"] .ann .ann-deco i:nth-child(3) { top: 34px; right: 30px; width: 16px; height: 16px; transform: rotate(-95deg); opacity: .45; }
html[data-ann="nature"] .ann .new { margin-right: 48px; }
html[data-ann="nature"] .ann .glyph { border-radius: 58% 42% 50% 50% / 46% 54% 46% 54%; background: var(--a-20); color: var(--an-ink); box-shadow: inset 0 0 0 1px var(--a-30); }
html[data-ann="nature"] .ann .label { font: 700 15.5px/1.2 var(--display); text-transform: none; letter-spacing: 0; color: var(--fg); }
html[data-ann="nature"] .ann .new { background: var(--a-20); color: var(--an-ink); border: 1px solid var(--a-45); border-radius: 99px 50px 99px 50px; box-shadow: none; }
html[data-ann="nature"] .ann .ann-body { font-size: 15px; line-height: 1.6; }
html[data-ann="nature"] .ann .btn { border-radius: 99px 60px 99px 60px; }
html[data-ann="nature"] .glass.ann.unread:not(.flat) { border-color: var(--a-45); animation: nt-blob 7s ease-in-out infinite, nt-breathe 3s ease-in-out infinite; }
html[data-ann="nature"] .ann.unread .ann-deco i:nth-child(1) { opacity: .9; animation: nt-sway 2.6s ease-in-out infinite; }
html[data-ann="nature"] .ann.unread .ann-deco i:nth-child(2) { opacity: .7; animation: nt-sway 3.1s ease-in-out infinite -1s; }
html[data-ann="nature"] .ann.unread .ann-deco i:nth-child(3) { opacity: .6; animation: nt-sway 3.6s ease-in-out infinite -.4s; }
html[data-ann="nature"] .ann.unread .glyph { animation: nt-blobg 4s ease-in-out infinite, ann-ring 2.4s ease-out infinite; }
html[data-ann="nature"] .ann.unread .new { animation: ann-pop 1.6s ease-in-out infinite; }
@keyframes nt-sway { 0%, 100% { rotate: 0deg; } 50% { rotate: 14deg; } }
@keyframes nt-blob { 0%, 100% { border-radius: 46px 20px 44px 24px / 30px 42px 26px 40px; } 50% { border-radius: 24px 44px 22px 46px / 42px 26px 40px 30px; } }
@keyframes nt-blobg { 0%, 100% { border-radius: 58% 42% 50% 50% / 46% 54% 46% 54%; } 50% { border-radius: 42% 58% 46% 54% / 56% 44% 56% 44%; } }
@keyframes nt-breathe { 50% { box-shadow: 0 18px 46px -18px var(--a-60), 0 0 0 4px var(--a-12); } }
/* posts */
html[data-ann="nature"] .msg.ann-msg .bubble { border: 1px solid var(--a-20); border-radius: 30px 14px 30px 16px / 22px 30px 18px 28px !important; padding: 16px 18px; overflow: hidden; }
html[data-ann="nature"] .msg.ann-msg .bubble::before { content: ""; position: absolute; top: 8px; right: 10px; width: 44px; height: 21px; border-radius: 0 100% 0 100%; background: var(--an-leaf); opacity: .5; transform: rotate(-28deg); pointer-events: none; }
html[data-ann="nature"] .msg.ann-msg .bubble::after { content: ""; position: absolute; bottom: -6px; left: -6px; width: 50px; height: 24px; border-radius: 0 100% 0 100%; background: var(--an-leaf); opacity: .3; transform: rotate(-150deg); pointer-events: none; }

/* =====================================================================
   GEO: bold geometric blocks
   ===================================================================== */
html[data-ann="geo"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) { background: var(--solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="geo"] .glass.ann:not(.flat) { padding: 20px 20px 20px 30px; border: 0; border-radius: 4px; box-shadow: inset 10px 0 0 var(--a), var(--shadow), 0 0 0 1px var(--line); }
html[data-ann="geo"] .ann .bloom { display: none; }
html[data-ann="geo"] .ann::before { content: ""; position: absolute; z-index: 0; width: 112px; height: 112px; right: -42px; top: -52px; border-radius: 50%; background: var(--a); pointer-events: none; }
html[data-ann="geo"] .ann .ann-deco { display: block; }
html[data-ann="geo"] .ann .ann-deco i:nth-child(1) { display: block; right: 0; bottom: 0; width: 92px; height: 80px; background: var(--a2); clip-path: polygon(100% 0, 100% 100%, 0 100%); opacity: .9; }
html[data-ann="geo"] .ann .ann-deco i:nth-child(2) { display: block; right: 7px; top: 46%; width: 14px; height: 14px; border: 3px solid var(--fg); transform: rotate(45deg); opacity: .8; }
html[data-ann="geo"] .ann .ann-deco i:nth-child(3) { display: none; right: 110px; bottom: -18px; width: 36px; height: 36px; border-radius: 50%; background: var(--fg); opacity: .14; }
html[data-ann="geo"] .ann .ann-deco i:nth-child(4) { display: block; left: 0; top: 0; width: 10px; height: 34%; background: var(--a2); }
html[data-ann="geo"] .ann .glyph { width: 42px; height: 42px; border-radius: 0; background: var(--fg); color: var(--solid); box-shadow: none; }
html[data-ann="geo"] .ann .hd .grow { padding-right: 34px; }
html[data-ann="geo"] .ann .label { font: 900 15px/1.05 var(--display); text-transform: uppercase; letter-spacing: -.005em; color: var(--fg); }
html[data-ann="geo"] .ann .new { border-radius: 0; background: var(--fg); color: var(--solid); box-shadow: none; }
html[data-ann="geo"] .ann .ann-body { font-size: 15px; padding-right: 26px; }
html[data-ann="geo"] .ann .btn { border-radius: 0; background: var(--fg); color: var(--solid); border: 0; box-shadow: none; font: 800 11px/1 var(--display); text-transform: uppercase; letter-spacing: .08em; }
html[data-ann="geo"] .glass.ann.unread:not(.flat) { animation: ge-bar 1.6s ease-in-out infinite; }
html[data-ann="geo"] .ann.unread::before { animation: ge-pulse 1.6s ease-in-out infinite; }
html[data-ann="geo"] .ann.unread .ann-deco i:nth-child(1) { animation: ge-slide 3.2s cubic-bezier(.7,0,.3,1) infinite; }
html[data-ann="geo"] .ann.unread .ann-deco i:nth-child(2) { animation: ge-spin 3.2s cubic-bezier(.7,0,.3,1) infinite; }
html[data-ann="geo"] .ann.unread .new { animation: ann-pop 1.6s ease-in-out infinite; }
@keyframes ge-bar { 50% { box-shadow: inset 16px 0 0 var(--a2), var(--shadow), 0 0 0 1px var(--a-45); } }
@keyframes ge-pulse { 50% { transform: scale(1.18); } }
@keyframes ge-slide { 0%, 40%, 100% { transform: none; } 55%, 85% { transform: translate(-14px, 0) scaleX(1.2); } }
@keyframes ge-spin { 0%, 30% { transform: rotate(45deg); } 60%, 100% { transform: rotate(225deg); } }
/* posts */
html[data-ann="geo"] .msg.ann-msg .bubble { border: 0; border-radius: 4px !important; overflow: hidden; padding: 16px 18px 16px 26px; box-shadow: inset 8px 0 0 var(--a), 0 0 0 1px var(--line), var(--shadow); }
html[data-ann="geo"] .msg.ann-msg .bubble::before { content: ""; position: absolute; right: -30px; top: -34px; width: 76px; height: 76px; border-radius: 50%; background: var(--a); pointer-events: none; }
html[data-ann="geo"] .msg.ann-msg .bubble::after { content: ""; position: absolute; right: 0; bottom: 0; width: 46px; height: 40px; background: var(--a2); clip-path: polygon(100% 0, 100% 100%, 0 100%); pointer-events: none; }
html[data-ann="geo"] .msg.ann-msg .bubble > * { position: relative; z-index: 1; }
html[data-ann="geo"] .msg.ann-msg .bubble .body { padding-right: 40px; }

/* =====================================================================
   MINIMAL: clean, with a thin accent bar and a dot when new
   ===================================================================== */
html[data-ann="minimal"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) { background: var(--solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="minimal"] .glass.ann:not(.flat) { padding: 16px 18px 16px 22px; border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: none; }
html[data-ann="minimal"] .ann .bloom { display: none; }
html[data-ann="minimal"] .ann::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--a); }
html[data-ann="minimal"] .ann .hd { gap: 10px; }
html[data-ann="minimal"] .ann .glyph { width: 28px; height: 28px; border-radius: 8px; background: transparent; color: var(--an-ink); box-shadow: none; }
html[data-ann="minimal"] .ann .label { font-size: 10.5px; letter-spacing: .16em; }
html[data-ann="minimal"] .ann .hd .hint { color: var(--dim); }
html[data-ann="minimal"] .ann .new { display: inline-flex; align-items: center; gap: 7px; padding: 0; background: transparent; color: var(--an-ink); box-shadow: none; font-size: 10.5px; letter-spacing: .14em; }
html[data-ann="minimal"] .ann .new::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--a); }
html[data-ann="minimal"] .ann .ann-body { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--fg); }
html[data-ann="minimal"] .ann .row .hint { color: var(--dim); }
html[data-ann="minimal"] .ann .btn { background: transparent; border: 0; padding: 4px 0; color: var(--an-ink); box-shadow: none; font-weight: 600; }
html[data-ann="minimal"] .glass.ann.unread:not(.flat) { border-color: var(--a-30); }
html[data-ann="minimal"] .ann.unread::before { background: linear-gradient(var(--a), var(--a2)); animation: mn-bar 2.4s ease-in-out infinite; }
html[data-ann="minimal"] .ann.unread .new::before { animation: mn-dot 1.6s ease-out infinite; }
@keyframes mn-dot { 0% { box-shadow: 0 0 0 0 var(--a-60); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes mn-bar { 50% { top: 6px; bottom: 6px; width: 4px; } }
/* posts */
html[data-ann="minimal"] .msg.ann-msg .bubble { border: 1px solid var(--line-2); border-radius: var(--r-md) !important; box-shadow: inset 3px 0 0 var(--a); padding: 14px 16px 14px 18px; }

/* =====================================================================
   POSTCARD: an airmail postcard with a stamp and a postmark
   ===================================================================== */
html[data-ann="postcard"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  --an-paper: color-mix(in oklab, var(--solid) 92%, #d9c49a); --an-serif: ui-serif, Georgia, "Times New Roman", serif;
  --an-air: repeating-linear-gradient(-45deg, var(--a) 0 8px, var(--an-paper) 8px 16px, var(--a2) 16px 24px, var(--an-paper) 24px 32px);
  background: linear-gradient(var(--an-paper), var(--an-paper)) padding-box, var(--an-air) 0 0 / 45.255px 45.255px border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="postcard"] .glass.ann:not(.flat) { padding: 16px 18px; border: 7px solid transparent; border-radius: 8px; box-shadow: 0 16px 32px -20px rgba(0,0,0,.55); }
html[data-ann="postcard"] .ann .bloom { display: none; }
html[data-ann="postcard"] .ann .hd { align-items: flex-start; }
html[data-ann="postcard"] .ann .glyph { order: 3; width: 50px; height: 58px; border-radius: 0; border: 4px dotted var(--an-paper); background: var(--grad) border-box;
  color: #fff; box-shadow: none; transform: rotate(4deg); outline: 1px solid rgba(255,255,255,.55); outline-offset: -7px; }
html[data-ann="postcard"] .ann .hd::after { content: ""; position: absolute; z-index: 3; top: 22px; right: 28px; width: 48px; height: 48px; border-radius: 50%; pointer-events: none;
  border: 2px solid color-mix(in oklab, var(--fg) 40%, transparent); box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in oklab, var(--fg) 25%, transparent); transform: rotate(-12deg); }
html[data-ann="postcard"] .ann .label { font: italic 700 20px/1.1 var(--an-serif); text-transform: none; letter-spacing: 0; color: var(--fg); }
html[data-ann="postcard"] .ann .hd .hint { margin-top: 4px; font: italic 12.5px/1.3 var(--an-serif); }
html[data-ann="postcard"] .ann .new { order: 2; align-self: center; margin-right: 14px; background: transparent; color: var(--an-ink); border: 2px solid var(--an-ink); border-radius: 3px;
  transform: rotate(-10deg); box-shadow: none; font: 900 11px/1 var(--an-serif); letter-spacing: .18em; }
html[data-ann="postcard"] .ann .ann-img { border-radius: 2px; border: 5px solid #fff; box-shadow: 0 6px 14px -8px rgba(0,0,0,.5); transform: rotate(-1deg); }
html[data-ann="postcard"] .ann .ann-body { margin-top: 12px; font-size: 15px; line-height: 26px; background: linear-gradient(transparent 25px, var(--line-2) 25px) 0 0 / 100% 26px; }
html[data-ann="postcard"] .ann .row .hint { font: italic 12.5px/1.3 var(--an-serif); }
html[data-ann="postcard"] .ann .btn { background: transparent; color: var(--an-ink); border: 1.5px solid var(--an-ink); border-radius: 3px; box-shadow: none;
  font: 800 10.5px/1 var(--body); text-transform: uppercase; letter-spacing: .14em; padding: 7px 10px; }
html[data-ann="postcard"] .glass.ann.unread:not(.flat) { animation: pc-air 1.4s linear infinite; box-shadow: 0 16px 32px -14px var(--a-60); }
html[data-ann="postcard"] .ann.unread .new { animation: pc-thunk 2.8s cubic-bezier(.2,.9,.3,1.3) infinite; }
html[data-ann="postcard"] .ann.unread .glyph { animation: pc-stamp 2.8s ease-in-out infinite; }
@keyframes pc-air { to { background-position: 0 0, 45.255px 0; } }
@keyframes pc-thunk { 0% { transform: rotate(-10deg) scale(2); opacity: 0; } 12% { transform: rotate(-10deg) scale(.94); opacity: 1; } 18%, 100% { transform: rotate(-10deg) scale(1); opacity: 1; } }
@keyframes pc-stamp { 0%, 60%, 100% { transform: rotate(4deg); } 70% { transform: rotate(-3deg) scale(1.06); } 80% { transform: rotate(6deg); } }
/* posts */
html[data-ann="postcard"] .msg.ann-msg .bubble { border: 6px solid transparent; border-radius: 6px !important; padding: 14px 16px; box-shadow: 0 12px 26px -18px rgba(0,0,0,.55); }
html[data-ann="postcard"] .msg.ann-msg .bubble::before { content: "Air mail \00b7  Announcement"; display: block; margin-bottom: 8px; white-space: pre;
  font: italic 700 15px/1.2 var(--an-serif); color: var(--an-ink); }
html[data-ann="postcard"] .msg.ann-msg .bubble .body { line-height: 26px; background: linear-gradient(transparent 25px, var(--line-2) 25px) 0 0 / 100% 26px; }

/* =====================================================================
   HOLOGRAM: an iridescent foil card with a shifting sheen
   ===================================================================== */
@property --an-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html[data-ann="hologram"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  --an-holo: conic-gradient(from var(--an-ang), var(--a), #6ef2ff, var(--a2), #ff8af0, #fff38a, var(--a));
  --an-foil: linear-gradient(115deg, transparent 12%, rgba(110,242,255,.14) 30%, rgba(255,138,240,.14) 46%, rgba(255,243,138,.12) 60%, transparent 80%);
  --an-scan: repeating-linear-gradient(0deg, rgba(var(--tint),.035) 0 1px, transparent 1px 3px);
  background: var(--an-foil) 0 0 / 240% 100%, var(--an-scan), linear-gradient(var(--solid), var(--solid)) padding-box, var(--an-holo) border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-mode="light"][data-ann="hologram"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  --an-foil: linear-gradient(115deg, transparent 12%, rgba(0,200,230,.12) 30%, rgba(240,70,210,.11) 46%, rgba(240,200,0,.12) 60%, transparent 80%); }
html[data-ann="hologram"] .glass.ann:not(.flat) { padding: 20px; border: 2px solid transparent; border-radius: var(--r-xl); box-shadow: var(--shadow), 0 0 26px -12px #6ef2ff, 0 0 26px -14px var(--a); }
html[data-ann="hologram"] .ann .bloom { display: none; }
html[data-ann="hologram"] .ann .glyph { border: 2px solid transparent; background: linear-gradient(var(--solid), var(--solid)) padding-box, var(--an-holo) border-box; color: var(--an-ink);
  box-shadow: 0 0 16px -4px #6ef2ff; }
html[data-ann="hologram"] .ann .label { font: 800 13px/1.2 var(--display); letter-spacing: .16em; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--an-ink), color-mix(in oklab, #3fd8ff 70%, var(--hi)) 50%, color-mix(in oklab, var(--a2) 70%, var(--hi))); }
html[data-ann="hologram"] .ann .new { background: linear-gradient(90deg, #6ef2ff, #ff8af0, #fff38a); color: #10121a; font-weight: 900; box-shadow: 0 0 14px -2px #6ef2ff; }
html[data-ann="hologram"] .ann .btn { border: 1px solid transparent; color: var(--fg); box-shadow: none;
  background: linear-gradient(var(--solid), var(--solid)) padding-box, linear-gradient(90deg, var(--a), #6ef2ff, var(--a2)) border-box; }
html[data-ann="hologram"] .glass.ann.unread:not(.flat) { animation: ho-spin 4s linear infinite, ho-sheen 3.2s ease-in-out infinite; box-shadow: var(--shadow), 0 0 30px -8px #6ef2ff, 0 0 30px -10px var(--a); }
html[data-ann="hologram"] .ann.unread .glyph { animation: ho-spin 3s linear infinite; }
html[data-ann="hologram"] .ann.unread .label { animation: ho-glitch 3s steps(1) infinite; }
html[data-ann="hologram"] .ann.unread .new { animation: ann-pop 1.2s ease-in-out infinite; }
@keyframes ho-spin { to { --an-ang: 360deg; } }
@keyframes ho-sheen { 0% { background-position: 100% 0, 0 0, 0 0, 0 0; } 100% { background-position: 0% 0, 0 0, 0 0, 0 0; } }
@keyframes ho-glitch { 0%, 88%, 100% { transform: none; filter: none; } 90% { transform: translate(2px, -1px) skewX(-8deg); filter: hue-rotate(90deg); } 93% { transform: translate(-2px, 1px); filter: hue-rotate(-60deg); } 96% { transform: translate(1px, 0); } }
/* posts */
html[data-ann="hologram"] .msg.ann-msg .bubble { border: 1.5px solid transparent; border-radius: var(--r-lg) !important; box-shadow: var(--shadow), 0 0 22px -12px #6ef2ff; }
html[data-ann="hologram"] .msg.ann-msg .bubble::before { content: "Announcement"; display: block; width: fit-content; margin-bottom: 8px; font: 800 11.5px/1.2 var(--display); letter-spacing: .16em;
  text-transform: uppercase; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--an-ink), color-mix(in oklab, #3fd8ff 70%, var(--hi)) 50%, color-mix(in oklab, var(--a2) 70%, var(--hi))); }

/* =====================================================================
   AURORA: soft northern-lights ribbons that drift when there's news
   ===================================================================== */
html[data-ann="aurora"] :is(.glass.ann:not(.flat), .msg.ann-msg .bubble) {
  background: linear-gradient(var(--solid), var(--solid)) padding-box, linear-gradient(120deg, var(--a-60), var(--a2-45) 35%, var(--a-12) 60%, var(--a2-45)) border-box; }
html[data-ann="aurora"] .glass.ann:not(.flat) { padding: 20px; border: 1px solid transparent; isolation: isolate; box-shadow: var(--shadow), 0 22px 50px -30px var(--a); }
html[data-ann="aurora"] .ann .bloom { display: none; }
html[data-ann="aurora"] .ann .ann-deco { display: block; z-index: 0; }
html[data-mode="dark"][data-ann="aurora"] .ann::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .8;
  background: radial-gradient(1px 1px at 12% 22%, #fff 99%, transparent), radial-gradient(1px 1px at 34% 8%, #fff 99%, transparent), radial-gradient(1.4px 1.4px at 58% 18%, #fff 99%, transparent),
    radial-gradient(1px 1px at 76% 6%, #fff 99%, transparent), radial-gradient(1.2px 1.2px at 88% 30%, #fff 99%, transparent), radial-gradient(1px 1px at 22% 48%, rgba(255,255,255,.7) 99%, transparent),
    radial-gradient(1px 1px at 66% 44%, rgba(255,255,255,.7) 99%, transparent), radial-gradient(1.2px 1.2px at 46% 70%, rgba(255,255,255,.6) 99%, transparent), radial-gradient(1px 1px at 92% 64%, rgba(255,255,255,.6) 99%, transparent); }
html[data-ann="aurora"] .ann .ann-deco i:nth-child(-n+3) { display: block; pointer-events: none; }
html[data-ann="aurora"] .ann .ann-deco i:nth-child(1) { left: -15%; width: 130%; top: 4px; height: 42px; filter: blur(14px); opacity: .85; transform: skewY(-7deg);
  background: linear-gradient(90deg, transparent, var(--a) 22%, color-mix(in oklab, var(--a) 40%, #35e0c0) 55%, var(--a2) 80%, transparent); opacity: 1; }
html[data-ann="aurora"] .ann .ann-deco i:nth-child(2) { left: -10%; width: 120%; top: 40px; height: 30px; filter: blur(16px); opacity: .5; transform: skewY(6deg);
  background: linear-gradient(90deg, transparent, var(--a2) 30%, color-mix(in oklab, var(--a2) 40%, #35e0c0) 65%, transparent); }
html[data-ann="aurora"] .ann .ann-deco i:nth-child(3) { left: 0; right: 0; top: 0; height: 110px; opacity: .85; filter: blur(1px);
  background: repeating-linear-gradient(90deg, var(--a-45) 0 2px, transparent 2px 7px, color-mix(in oklab, var(--a2) 45%, #35e0c0 20%) 7px 9px, transparent 9px 15px);
  -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent); }
html[data-mode="light"][data-ann="aurora"] .ann .ann-deco i:nth-child(1) { opacity: .45; }
html[data-mode="light"][data-ann="aurora"] .ann .ann-deco i:nth-child(2) { opacity: .3; }
html[data-mode="dark"][data-ann="aurora"] .glass.ann:not(.flat) { background: linear-gradient(180deg, color-mix(in oklab, var(--a) 10%, #04050b), var(--solid) 75%) padding-box,
  linear-gradient(120deg, var(--a-60), var(--a2-45) 35%, var(--a-12) 60%, var(--a2-45)) border-box; }
html[data-ann="aurora"] .ann .glyph { box-shadow: 0 0 24px -2px var(--a-60), inset 0 1px 0 rgba(255,255,255,.35); }
html[data-ann="aurora"] .ann .label { color: var(--fg); text-shadow: 0 0 16px var(--a-60); }
html[data-ann="aurora"] .glass.ann.unread:not(.flat) { box-shadow: var(--shadow), 0 0 0 1px var(--a-45), 0 0 36px -8px var(--a-60); animation: ann-glow 2.6s ease-in-out infinite; }
html[data-ann="aurora"] .ann.unread .ann-deco i:nth-child(1) { animation: au-drift 4s ease-in-out infinite alternate; }
html[data-ann="aurora"] .ann.unread .ann-deco i:nth-child(2) { animation: au-drift2 5s ease-in-out infinite alternate; }
html[data-ann="aurora"] .ann.unread .ann-deco i:nth-child(3) { animation: au-rays 3s ease-in-out infinite alternate; }
html[data-ann="aurora"] .ann.unread .glyph { animation: ann-ring 2.4s ease-out infinite; }
html[data-ann="aurora"] .ann.unread .new { animation: ann-pop 1.2s ease-in-out infinite; }
@keyframes au-drift { 0% { transform: skewY(-7deg) translateX(-8%); opacity: .7; } 100% { transform: skewY(4deg) translateX(8%) scaleY(1.5); opacity: 1; } }
@keyframes au-drift2 { 0% { transform: skewY(6deg) translateX(6%); } 100% { transform: skewY(-5deg) translateX(-8%) scaleY(1.4); } }
@keyframes au-rays { 0% { background-position: 0 0; opacity: .4; } 100% { background-position: 30px 0; opacity: .8; } }
/* posts */
html[data-ann="aurora"] .msg.ann-msg .bubble { border: 1px solid transparent; isolation: isolate; overflow: hidden; box-shadow: var(--shadow), 0 18px 40px -30px var(--a); }
html[data-ann="aurora"] .msg.ann-msg .bubble::before { content: ""; position: absolute; z-index: -1; inset: -30px -20px auto -20px; height: 80px; pointer-events: none;
  background: radial-gradient(50% 50% at 25% 50%, var(--a-45), transparent), radial-gradient(45% 50% at 80% 60%, var(--a2-45), transparent); filter: blur(14px); opacity: .8; }

/* ---------- moving effects off: everything still (the unread state stays visible, just not moving) ---------- */
html[data-motion="off"] :is(.ann, .ann *, .msg.ann-msg .bubble),
html[data-motion="off"] :is(.ann, .ann *, .msg.ann-msg .bubble)::before,
html[data-motion="off"] :is(.ann, .ann *, .msg.ann-msg .bubble)::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html :is(.ann, .ann *, .msg.ann-msg .bubble), html :is(.ann, .ann *, .msg.ann-msg .bubble)::before, html :is(.ann, .ann *, .msg.ann-msg .bubble)::after { animation: none !important; }
}

/* ================================================================== 2.8.57: calm designs that match the style
   match  : your normal card + a megaphone drawn in your tile-picture style (the default for every style)
   banner : the megaphone picture fills the right side
   accent : your card with a bar of your colour down the side
   soft   : quiet, just a dot when it's new                                                              */
.ann > .tileart { display: none; }
html:is([data-ann="match"], [data-ann="banner"], [data-ann="accent"]) .ann > span.tileart.tileart {
  display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit;
  --ta-fg: var(--fg); --ta-cut: var(--solid); --ta-ink: #100e17; contain: paint; }
html:is([data-ann="match"], [data-ann="banner"], [data-ann="accent"]) .ann > :not(.tileart):not(.bloom):not(.ann-deco) { position: relative; z-index: 1; }
html[data-ann="match"] .ann .ta-emblem .ta-svg { top: auto; bottom: -10%; right: -4%; height: 86%; max-width: 46%; opacity: .22 !important; rotate: -8deg;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 60%); mask-image: linear-gradient(100deg, transparent 0%, #000 60%); }
html[data-ann="match"][data-mode="light"] .ann .ta-emblem .ta-svg { opacity: .3 !important; }
html[data-ann="banner"] .ann .ta-emblem .ta-svg { top: -12%; right: -6%; height: 128%; max-width: 58%; opacity: .5 !important; }
html[data-ann="banner"] .ann .tileart::after { background: linear-gradient(90deg, color-mix(in oklab, var(--solid) 82%, transparent) 0%, color-mix(in oklab, var(--solid) 55%, transparent) 50%, transparent 85%); }
html[data-ann="banner"] .ann .ann-body { max-width: 72%; }
html[data-ann="accent"] .ann { box-shadow: inset 4px 0 0 var(--a), var(--shadow); padding-left: 22px; }
html[data-ann="accent"] .ann .tileart { display: none !important; }
html[data-ann="accent"] .ann .tileart::after, html[data-ann="match"] .ann .tileart::after { background: none; }
/* the tile-picture sets that hide their pictures on tiles */
html[data-tileart="faded"] .ann .tileart .ta-svg { opacity: .14; }
html[data-tileart="none"] .ann .tileart { display: none !important; }
/* soft */
html[data-ann="soft"] .ann { background: rgba(var(--tint), .03); border: 1px solid var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ann="soft"] .ann .bloom { display: none; }
html[data-ann="soft"] .ann .glyph { background: var(--a-12); color: var(--a); box-shadow: none; width: 34px; height: 34px; }
html[data-ann="soft"] .ann.unread { border-color: var(--a-30); }
html[data-ann="soft"] .ann.unread::after { display: none; }
html[data-ann="soft"] .ann.unread .glyph { animation: none; }
html[data-ann="soft"] .ann .new { font-size: 0; padding: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--a); box-shadow: 0 0 0 4px var(--a-12);
  animation: ann-softdot 2.4s ease-in-out infinite; }
@keyframes ann-softdot { 50% { box-shadow: 0 0 0 7px var(--a-6); } }
@media (prefers-reduced-motion: reduce) { html[data-ann="soft"] .ann .new { animation: none; } }
html[data-motion="off"][data-ann="soft"] .ann .new { animation: none; }