/* ============================================================
   The mssgs feed's cards, wherever they are drawn: the live column
   on the home page and /{lang}/feed (.fs), feed.mss.gs (with
   feed-host.css), and the embed (.fe). The markup comes from
   pages/feed/feed-ui.mjs and web-static/js/feed.js (cardHtml), which
   draw the same card. Dark like the app; avatars are rounded squares.
   ============================================================ */

.fp, .fs, .fe, .fr, .fp-pill, .fp-toast {
  --fp-bg: #14171b;
  --fp-raise: #1b1f24;
  --fp-line: rgba(255, 255, 255, .08);
  --fp-ink: #e8eaed;
  --fp-mut: #8d969f;
  --fp-link: #6fd39b;
  /* A link under the pointer: a readable blue on the dark card (6.8:1). */
  --fp-hover: #4aa3ff;
  --fp-hover-line: rgba(74, 163, 255, .5);
  --fp-like: #f4729b;
  --fp-font: var(--font-sans, 'Hanken Grotesk', 'Hanken Fallback', -apple-system, 'Segoe UI', sans-serif);
  --fp-display: var(--font-display, 'Bricolage Grotesque', 'Bricolage Fallback', 'Hanken Grotesk', sans-serif);
}

/* ---- A post ---- */
.fp {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--fp-line);
  color: var(--fp-ink);
  font: 400 15px/1.45 var(--fp-font);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.fp *, .fp *::before, .fp *::after { box-sizing: border-box; }
.fp-row { cursor: pointer; transition: background-color .15s ease; }
.fp-row:hover { background-color: rgba(255, 255, 255, .025); }
.fp-row:focus-within { background-color: rgba(255, 255, 255, .02); }

.fp-av {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  background: #2a2e34;
}
/* An avatar is a link: its initials are never underlined. */
.fp-av, .fq-av, .fp-av:hover, .fq-av:hover { text-decoration: none; }
.fp-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fp-av-fb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
}

/* "↻ sofie reposted": above a post a repost brought back to the top. The
   icon sits at the avatar's edge, the words over the name. */
.fp-ctx {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: -4px 0 -8px;
  color: var(--fp-mut);
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  text-decoration: none;
}
.fp-ctx .fp-ic { justify-self: end; }
.fp-ctx span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fp-main { min-width: 0; }
.fp-head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  line-height: 20px;
  white-space: nowrap;
}
.fp-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--fp-ink);
  text-decoration: none;
}
.fp-name b { overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.fp-badge { flex: none; width: 16px; height: 16px; }
.fp-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  color: var(--fp-mut);
}
.fp-handle { overflow: hidden; text-overflow: ellipsis; }
.fp-dot, .fp-time { flex: none; }
.fp-time { color: inherit; text-decoration: none; }

/* The links in a card under the pointer: the name, the @handle, the time,
   who reposted it, and the @mentions, #hashtags and URLs in its text turn a
   readable blue with a soft underline. Every state is pinned here, because
   the site's own link colours (fancy.css a:hover, dark green) would
   otherwise reach the dark card on mss.gs and leave the name unreadable. */
:is(.fp, .fr) a.fp-name:is(:link, :visited, :hover, :active) { color: var(--fp-ink, #e8eaed); text-decoration: none; }
:is(.fp, .fr) a.fp-handle:is(:link, :visited, :hover, :active),
:is(.fp, .fr) a.fp-time:is(:link, :visited, :hover, :active),
:is(.fp, .fr) a.fp-ctx:is(:link, :visited, :hover, :active) { color: var(--fp-mut, #8d969f); text-decoration: none; }
:is(.fp, .fr) a.fp-name:is(:hover, :focus-visible) b,
:is(.fp, .fr) a.fp-handle:hover,
:is(.fp, .fr) a.fp-time:is(:hover, :focus-visible),
:is(.fp, .fr) a.fp-ctx[href]:is(:hover, :focus-visible) span {
  color: var(--fp-hover, #4aa3ff);
  text-decoration: underline;
  text-decoration-color: var(--fp-hover-line, rgba(74, 163, 255, .5));
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:is(.fp, .fr) a.fp-name:focus-visible,
:is(.fp, .fr) a.fp-time:focus-visible,
:is(.fp, .fr) a.fp-ctx:focus-visible,
.fp-text a:focus-visible {
  outline: 2px solid var(--fp-hover, #4aa3ff);
  outline-offset: 2px;
  border-radius: 4px;
}

.fp-text {
  margin-top: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.fp-text a:is(:link, :visited, :active) {
  color: var(--fp-link);
  text-decoration: underline;
  text-decoration-color: rgba(111, 211, 155, .4);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.fp-text a:is(:hover, :focus-visible) {
  color: var(--fp-hover, #4aa3ff);
  text-decoration: underline;
  text-decoration-color: var(--fp-hover-line, rgba(74, 163, 255, .5));
  text-decoration-thickness: 1px;
}

/* Emoji as Twemoji, the size of the letters around them: the box is there
   before the picture, so nothing moves when it loads. */
.fp-emoji {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin: 0 .05em 0 .1em;
  vertical-align: -.22em;
}

/* Built-in stickers: inline in a sentence, large when a text is only
   stickers. The still replaces the animation for less motion (<picture>). */
.fp-sticker { display: inline-block; flex: none; }
.fp-sticker img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fp-sticker-inline { width: 1.9em; height: 1.9em; margin: 0 .05em; vertical-align: -.55em; }
.fp-stickers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fp-sticker-big { width: 132px; height: 132px; }
.fp-focus .fp-sticker-big, .fp-embed .fp-sticker-big { width: 168px; height: 168px; }
.fr .fp-sticker-big { width: 104px; height: 104px; }

/* A GIF (the whole text one Klipy or mss.gs URL): its own shape, in a box
   the markup sizes, so the row is as tall as it will be before a frame has
   loaded. */
.fp-gif {
  max-width: 100%;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 14px;
  background: #22272d;
}
.fp-gif img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fp-focus .fp-gif, .fp-embed .fp-gif { grid-column: 1 / -1; margin-top: 14px; }
.fp-focus .fp-stickers, .fp-embed .fp-stickers { grid-column: 1 / -1; margin-top: 12px; }

.fp-place {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 0;
  color: var(--fp-mut);
  font-size: 13px;
  line-height: 1.3;
}
.fp-place .fp-ic { color: var(--fp-link); }

/* A quote post's card (docs/feed-v2.md "Quotes"): the quoted post or chat
   message in a rounded-square box under the post's own words, its author
   with a small square avatar, its words drawn like a post's and clamped to
   about six lines, a post's picture as a small square beside them, and a
   public channel's "#channel · server" under them. A card that goes
   somewhere (data-href, feed.js) answers the pointer like a row does. */
.fq {
  margin: 8px 0 0;
  padding: 9px 12px 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  font-size: 14.5px;
  line-height: 1.42;
}
.fq[data-href] { cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.fq[data-href]:hover { background-color: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .22); }
.fq-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  line-height: 20px;
  white-space: nowrap;
}
.fq-av {
  flex: none;
  display: block;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: 6px;
  background: #2a2e34;
}
.fq-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fq-av .fp-av-fb { font-size: 9px; }
.fq-name { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.fq-name b { overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.fq .fp-badge { width: 14px; height: 14px; }
.fq-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  color: var(--fp-mut);
}
.fq-handle { overflow: hidden; text-overflow: ellipsis; }
.fq-time { flex: none; }
.fq .fq-time time { color: inherit; }
.fq a.fq-name:is(:link, :visited, :hover, :active) { color: var(--fp-ink, #e8eaed); text-decoration: none; }
.fq a.fq-time:is(:link, :visited, :hover, :active) { color: var(--fp-mut, #8d969f); text-decoration: none; }
.fq a.fq-name:is(:hover, :focus-visible) b,
.fq a.fq-time:is(:hover, :focus-visible) {
  color: var(--fp-hover, #4aa3ff);
  text-decoration: underline;
  text-decoration-color: var(--fp-hover-line, rgba(74, 163, 255, .5));
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.fq a.fq-name:focus-visible, .fq a.fq-time:focus-visible { outline: 2px solid var(--fp-hover, #4aa3ff); outline-offset: 2px; border-radius: 4px; }
.fq-body { display: flex; align-items: flex-start; gap: 10px; margin-top: 3px; }
.fq-quote { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; quotes: none; }
.fq .fp-text {
  display: -webkit-box;
  margin-top: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
}
.fq .fp-stickers { margin-top: 2px; }
.fq .fp-sticker-big { width: 72px; height: 72px; }
.fq .fp-gif { margin-top: 4px; border-radius: 10px; }
.fq-thumb {
  position: relative;
  flex: none;
  display: block;
  width: 64px;
  height: 64px;
  margin-top: 2px;
  overflow: hidden;
  border: 1px solid var(--fp-line);
  border-radius: 10px;
  background: #0c0e11;
}
.fq-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A video's thumbnail: the play button's quiet square, small. */
.fq-thumb-video::before,
.fq-thumb-video::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
}
.fq-thumb-video::before { width: 28px; height: 28px; border-radius: 8px; background: rgba(8, 10, 12, .55); }
.fq-thumb-video::after { width: 11px; height: 13px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translateX(1px); }
.fq-where {
  margin: 5px 0 0;
  overflow: hidden;
  color: var(--fp-mut);
  font-size: 13px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fq-gone { margin: 3px 0 0; color: var(--fp-mut); font-style: italic; }
.fq-removed { background: transparent; }

/* Media: a timeline keeps a picture's own shape between 1.91:1 and 4:5,
   cropped to fill; a post's own page and the embed show all of it. */
.fp-media {
  position: relative;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--fp-line);
  border-radius: 16px;
  background: #0c0e11;
  aspect-ratio: var(--ar, 1);
}
/* In a timeline a tall picture is as wide as its height allows, the way a
   timeline shows a portrait photo, rather than a full-width crop. */
.fp-row .fp-media { width: min(100%, calc(var(--ar, 1) * var(--fp-mh, 510px))); }
.fp-media > img, .fp-slide img, .fp-video > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fp-slides .fp-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.fp-slides .fp-track::-webkit-scrollbar { display: none; }
.fp-slides .fp-track:focus-visible { outline: 2px solid var(--fp-link); outline-offset: -2px; }
.fp-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; }
.fp-count {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
/* The play button: a quiet rounded square, the same on every page that
   shows the feed. The icon's path is already optically centred (its
   centroid sits on the middle), so no nudging padding. It is a link, so its
   colour and underline are pinned for every link state: the home page's
   link colours must not turn the triangle green. */
.fp-play,
.fp-play:link,
.fp-play:visited {
  position: absolute;
  inset: 0;
  width: 56px;
  height: 56px;
  margin: auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: rgba(8, 10, 12, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 4px 16px rgba(0, 0, 0, .22);
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color .15s ease, box-shadow .15s ease;
}
.fp-play svg { display: block; width: 24px; height: 24px; }
.fp-play:hover,
.fp-play:focus-visible {
  color: #fff;
  text-decoration: none;
  background: rgba(8, 10, 12, .66);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34), 0 4px 16px rgba(0, 0, 0, .28);
}
.fp-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fp-play:active { background: rgba(8, 10, 12, .74); }
.fp-video.fp-playing { aspect-ratio: auto; }
.fp-video video { display: block; width: 100%; max-height: 80vh; background: #000; }

/* The counts: replies, reposts, likes, views, share */
.fp-acts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 420px;
  margin: 6px 0 0 -8px;
  color: var(--fp-mut);
}
.fp-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
a.fp-act:hover, button.fp-act:hover { color: var(--fp-link); background: rgba(111, 211, 155, .1); }
span.fp-act { cursor: default; }
.fp-act:focus-visible { outline: 2px solid var(--fp-link); outline-offset: 1px; }
.fp-ic { flex: none; }
.fp-n { min-width: 1ch; font-variant-numeric: tabular-nums; }
.fp-bump .fp-n { animation: fpBump .45s ease; }
@keyframes fpBump { 40% { transform: translateY(-3px); color: var(--fp-ink); } }

/* A post on its own page, and in the embed: the text runs the full width
   under the name, the picture is whole, the time is written out. */
.fp-focus, .fp-embed {
  grid-template-columns: 48px minmax(0, 1fr);
  row-gap: 0;
  padding: 18px 18px 6px;
  border-bottom: 0;
}
.fp-focus .fp-main, .fp-embed .fp-main { display: contents; }
.fp-focus .fp-av, .fp-embed .fp-av { width: 48px; height: 48px; border-radius: 12px; }
.fp-focus .fp-head, .fp-embed .fp-head {
  grid-column: 2;
  align-self: center;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.fp-focus .fp-meta, .fp-embed .fp-meta { max-width: 100%; }
.fp-focus .fp-text, .fp-focus .fp-place, .fp-focus .fp-media, .fp-focus .fp-when, .fp-focus .fp-acts,
.fp-embed .fp-text, .fp-embed .fp-place, .fp-embed .fp-media, .fp-embed .fp-when, .fp-embed .fp-acts { grid-column: 1 / -1; }
.fp-focus .fq, .fp-embed .fq { grid-column: 1 / -1; margin-top: 12px; }
.fp-focus .fp-text { margin-top: 14px; font-size: 19px; line-height: 1.45; }
.fp-focus .fq .fp-text, .fp-embed .fq .fp-text { margin-top: 0; font-size: 15px; line-height: 1.42; }
.fp-embed .fp-text { margin-top: 12px; font-size: 17px; line-height: 1.45; }
.fp-focus .fp-media, .fp-embed .fp-media {
  margin-top: 14px;
  aspect-ratio: var(--ar, auto);
  max-height: min(78vh, 720px);
}
.fp-focus .fp-media > img, .fp-embed .fp-media > img { object-fit: contain; }
.fp-when {
  margin: 14px 0 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fp-line);
  color: var(--fp-mut);
  font-size: 14px;
}
.fp-focus .fp-acts, .fp-embed .fp-acts { max-width: none; margin: 4px 0 0; justify-content: space-around; }
.fp-focus .fp-acts { padding: 2px 0 10px; border-bottom: 1px solid var(--fp-line); }

/* Arriving, leaving */
.fp-new { animation: fpGlow 2.4s ease; }
@keyframes fpGlow { from { background-color: rgba(111, 211, 155, .1); } to { background-color: transparent; } }
.fp-enter { animation: fpEnter .45s cubic-bezier(.2, .7, .2, 1), fpGlow 2.4s ease; }
@keyframes fpEnter { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.fp-gone { opacity: 0; transition: opacity .3s ease; }
.fp-is-removed { opacity: .45; }
.fp-removed, .fp-empty {
  margin: 0;
  padding: 28px 20px;
  color: var(--fp-mut, #8d969f);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}
.fp-removed { padding: 12px 18px 0; }

/* ↑ New mssgs */
.fp-pill {
  position: absolute;
  top: 64px;
  left: 50%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border: 0;
  border-radius: 12px;
  background: #2f6e48;
  color: #f7f3e8;
  font: 700 14px/1 var(--fp-font);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  cursor: pointer;
  transform: translateX(-50%);
  animation: fpPillIn .25s ease;
}
.fp-pill[hidden] { display: none; }
.fp-pill:hover { background: #265f3e; }
.fp-pill:focus-visible { outline: 3px solid rgba(111, 211, 155, .6); outline-offset: 2px; }
/* Over a page's timeline: it sticks under the bar, inside the column, and
   takes no room of its own (the margin gives its height back). */
.fp-pill-page {
  position: sticky;
  top: 74px;
  left: auto;
  display: flex;
  width: max-content;
  height: 34px;
  margin: 0 auto -34px;
  transform: none;
  animation-name: fpPillInPage;
}
@keyframes fpPillInPage { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.fp-pill-faces { display: inline-flex; }
.fp-pill-av {
  display: block;
  width: 22px;
  height: 22px;
  margin-left: -6px;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #2f6e48;
}
.fp-pill-av:first-child { margin-left: 0; }
.fp-pill-av img, .fp-pill-av .fp-av-fb { display: flex; width: 100%; height: 100%; object-fit: cover; font-size: 10px; }
@keyframes fpPillIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translateX(-50%); } }

.fp-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 12px;
  background: #20252b;
  color: #fff;
  font: 600 14px/1.3 var(--fp-font);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .2s ease, transform .2s ease;
}
.fp-toast-on { opacity: 1; transform: translate(-50%, 0); }

/* The replies under a post: tweets, one level of thread */
.fp-replies { border-top: 1px solid var(--fp-line, rgba(255, 255, 255, .08)); }
.fp-replies-h {
  margin: 0;
  padding: 16px 18px 6px;
  color: #fff;
  font: 700 18px/1.2 var(--fp-display, 'Bricolage Grotesque', 'Bricolage Fallback', sans-serif);
  letter-spacing: -.01em;
}
.fr-list, .fr-children { list-style: none; margin: 0; padding: 0; }
/* Flat rows, edge to edge, a hairline between every reply (one to a reply
   too): no boxes, no thread lines. A reply to a reply is set in under its
   parent's text; its hairline still runs the full width. */
.fr-list .fr { border-top: 1px solid rgba(255, 255, 255, .08); }
.fr {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 18px 10px;
  color: #e8eaed;
  font: 400 15px/1.45 var(--font-sans, 'Hanken Grotesk', 'Hanken Fallback', -apple-system, sans-serif);
}
.fr .fp-av { width: 36px; height: 36px; border-radius: 9px; }
.fr .fp-text { font-size: 15px; }
.fr-children .fr { padding-left: 64px; }
.fr-children .fr .fp-av { width: 30px; height: 30px; border-radius: 8px; }
.fr-children .fr { grid-template-columns: 30px minmax(0, 1fr); }
.fr-acts { margin: 0 0 0 -8px; }

/* ============================================================
   The live column on mss.gs (home hero, /{lang}/feed)
   ============================================================ */
.fs { position: relative; max-width: 1000px; margin: 0 auto; scroll-margin-top: 96px; }
.fs-device {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  height: 640px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 30px;
  background: var(--fp-bg);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 0 0 7px rgba(255, 253, 244, .55),
    0 0 0 8px rgba(50, 55, 30, .08),
    0 34px 80px rgba(20, 32, 24, .28);
  text-align: left;
}
.fs-head {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--fp-line);
  background: rgba(20, 23, 27, .94);
  color: var(--fp-ink);
  font: 700 16px/1 var(--fp-font);
}
.fs-head svg { width: 18px; height: 23px; flex: none; }
.fs-head b { font-family: var(--fp-display); font-size: 18px; letter-spacing: -.02em; }
.fs-head-sub { color: var(--fp-mut); font-weight: 600; }
.fs-live, .fh-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: var(--fp-mut, #8d969f);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fs-live i, .fh-live i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #59626b;
}
.fs-live.is-live, .fh-live.is-live { color: #b9f0cd; }
.fs-live.is-live i, .fh-live.is-live i { background: #2fd06e; animation: fpPulse 2s ease-out infinite; }
@keyframes fpPulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 208, 110, .55); }
  70% { box-shadow: 0 0 0 8px rgba(47, 208, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 208, 110, 0); }
}
.fs-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 4px;
  border-radius: 10px;
  color: var(--fp-mut);
  transition: color .15s ease, background-color .15s ease;
}
.fs-open:hover { color: var(--fp-ink); background: rgba(255, 255, 255, .06); }
.fs-scroll {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #3a3f45 transparent;
}
.fs-scroll::-webkit-scrollbar { width: 8px; }
.fs-scroll::-webkit-scrollbar-thumb { background: #3a3f45; border-radius: 4px; }
.fs-device::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(rgba(20, 23, 27, 0), var(--fp-bg));
  pointer-events: none;
}
/* The column's pictures stay small, so nothing it adds can outgrow the hero
   headline (the LCP element). */
.fs { --fp-mh: 290px; }
.fs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 500px;
  padding: 28px;
  color: var(--fp-mut);
  font: 500 15px/1.5 var(--fp-font);
  text-align: center;
}
.fs-empty svg { width: 34px; height: 44px; opacity: .9; }
.fs-empty p { max-width: 280px; margin: 0; }
.fs-caption {
  max-width: 540px;
  margin: 26px auto 0;
  color: var(--w-mut, #525f4c);
  font-size: 15px;
  line-height: 1.55;
  text-align: center;
}
.fs-caption a { color: var(--green-700, #1f4f34); font-weight: 600; text-decoration: underline; white-space: nowrap; }

/* Notes beside the column, on a wide screen */
.fs-note {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 230px;
  padding: 12px 16px 12px 12px;
  border-radius: 16px;
  background: rgba(255, 253, 244, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 34px rgba(31, 35, 33, .1), 0 0 0 1px rgba(50, 55, 30, .07);
  color: var(--w-ink2, #33402f);
  font: 600 14.5px/1.35 var(--fp-font);
  text-align: left;
}
.fs-note-ic {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(51, 117, 77, .12);
  color: var(--green-600, #265f3e);
}
.fs-note-1 { top: 96px; left: 0; }
.fs-note-2 { top: 270px; right: 6px; }
.fs-note-3 { top: 452px; left: 24px; }
@media (max-width: 1060px) { .fs-note { display: none; } }
@media (max-width: 560px) {
  .fs-device { height: 560px; border-radius: 24px; }
  .fs-head { height: 52px; padding: 0 10px 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-new, .fp-enter, .fp-bump .fp-n, .fp-pill { animation: none; }
  .fs-live.is-live i, .fh-live.is-live i { animation: none; }
}

/* ============================================================
   The embed (feed.mss.gs/{guid}/embed), in someone else's page
   ============================================================ */
.fe-html, .fe-body { margin: 0; padding: 0; background: transparent; }
.fe {
  position: relative;
  box-sizing: border-box;
  max-width: 550px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #2c3136;
  border-radius: 16px;
  background: var(--fp-bg);
  color-scheme: dark;
}
.fe-logo {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  display: block;
  width: 20px;
  height: 26px;
}
.fe-logo svg { display: block; width: 100%; height: 100%; }
.fe .fp-embed .fp-head { padding-right: 32px; }
.fe-more {
  display: block;
  margin: 2px 16px 14px;
  padding: 9px 12px;
  border: 1px solid var(--fp-line);
  border-radius: 12px;
  color: var(--fp-link);
  font: 700 14px/1.3 var(--fp-font);
  text-align: center;
  text-decoration: none;
}
.fe-more:hover { background: rgba(111, 211, 155, .08); }