/* Space Feed, Figma 2394:2764 / 2766 / 2768. Reader is untouched. */
.space-feed-route .space-navigation-item img {
  filter: none !important;
}
.space-app.space-feed-route {
  height: 100dvh !important;
  min-height: 100dvh !important;
  background: #0b0c0a;
  color: #f1e2c9;
}
#space-feed-host {
  height: 100%;
  overflow-anchor: none;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.feed-screen {
  min-height: 100%;
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
  color: #f1e2c9;
  background: #0b0c0a;
  font:
    300 12px/16px "Geologica Pilcrow",
    sans-serif;
  font-variation-settings:
    "CRSV" 0,
    "SHRP" 0;
}
.feed-screen * {
  box-sizing: border-box;
}
.feed-screen [hidden] {
  display: none !important;
}
.feed-screen button,
.feed-screen input {
  font: inherit;
  color: inherit;
}
.feed-screen button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.feed-screen button:focus-visible,
.feed-screen input:focus-visible {
  outline: 2px solid #8047fa;
  outline-offset: 3px;
}
.feed-screen button:active > img {
  transform: scale(0.92);
}
.feed-screen p,
.feed-screen h2,
.feed-screen blockquote {
  margin: 0;
}
.feed-screen img {
  display: block;
  flex: none;
}
.feed-screen b {
  font-weight: 600;
}
.feed-screen small {
  font-size: 10px;
  line-height: 17px;
  color: #cbc0ad;
}
.feed-header {
  position: sticky;
  z-index: 5;
  top: 0;
  padding: calc(20px + env(safe-area-inset-top)) 21px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #0b0c0a;
}
.feed-primary-row {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.feed-create {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 112px;
  height: 36px;
  padding: 0 12px !important;
  background: #111210 !important;
  border: 1px solid #353637 !important;
  border-radius: 18px;
}
.feed-create span {
  flex: 1;
}
.feed-world-switch {
  display: flex;
  flex: none;
  gap: 4px;
  width: 160px;
  height: 36px;
  padding: 3px;
  border: 1px solid #353637;
  border-radius: 18px;
  background: #111210;
}
.feed-world-switch button {
  width: 74px;
  height: 28px;
  border-radius: 14px;
  color: #cbc0ad;
}
.feed-world-switch button[aria-current] {
  background: #8047fa;
  color: #fafaf7;
}
.feed-compact-title {
  display: none;
  font-size: 14px;
  line-height: 20px;
}
.feed-stream-tabs {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 24px;
}
.feed-stream-tabs button[aria-pressed="true"] {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.feed-stream-tabs button[aria-pressed="false"] {
  color: #cbc0ad;
}
.feed-stream-tabs button:last-child {
  margin-left: auto;
}
.feed-header[data-header="compact"] .feed-create,
.feed-header[data-header="compact"] .feed-stream-tabs,
.feed-header[data-header="minimal"] .feed-primary-row,
.feed-header[data-header="minimal"] .feed-stream-tabs {
  display: none;
}
.feed-header[data-header="compact"] .feed-compact-title {
  display: block;
}
.feed-filters {
  display: flex;
  align-items: center;
  height: 28px;
  gap: 12px;
}
.feed-filters > button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 28px;
}
.feed-filters > i {
  width: 1px;
  height: 20px;
  background: #353637;
  flex: none;
}
.feed-filters > nav {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
  height: 28px;
  border-bottom: 1px solid #353637;
  overflow-x: auto;
  scrollbar-width: none;
}
.feed-filters > nav::-webkit-scrollbar {
  display: none;
}
.feed-filters nav button {
  position: relative;
  height: 28px;
  flex: none;
  color: #cbc0ad;
  white-space: nowrap;
}
.feed-filters nav button:nth-child(1) {
  width: 34px;
}
.feed-filters nav button:nth-child(2) {
  width: 47px;
}
.feed-filters nav button:nth-child(3) {
  width: 53px;
}
.feed-filters nav button:nth-child(4) {
  width: 49px;
}
.feed-filters nav button:nth-child(5) {
  width: 67px;
}
.feed-filters nav button[aria-pressed="true"] {
  color: #f1e2c9;
  font-weight: 600;
}
.feed-filters nav button[aria-pressed="true"]:after {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 0;
  left: 0;
  right: 0;
  background: #8047fa;
}
.feed-search {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #353637;
  border-radius: 20px;
  background: #111210;
  padding: 0 12px;
  height: 36px;
}
.feed-search input {
  width: 0;
  min-width: 0;
  flex: 1;
  appearance: none;
  border: 0;
  background: none;
}
.feed-search input::-webkit-search-cancel-button {
  display: none;
}
.feed-search button {
  font-size: 22px;
  width: 24px;
}
.feed-body {
  padding: 0 21px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feed-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
  border: 1px solid #353637;
  border-radius: 14px;
  background: #171919;
  overflow: hidden;
  flex: none;
}
.feed-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  flex: none;
}
.feed-card-header > span:not(.feed-avatar) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.feed-card-header b {
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.feed-card-header > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 40px;
  flex: none;
}
.feed-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  overflow: hidden;
  flex: none;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  background: #111210;
}
.feed-avatar.is-editorial {
  border: 1.5px solid #f1e2c9;
  background: transparent;
}
.feed-avatar img {
  position: absolute;
  max-width: none;
  width: 886.36%;
  height: 1916.12%;
  left: -63.64%;
}
.feed-avatar--post img {
  top: -440.91%;
}
.feed-avatar--review img {
  top: -209.09%;
}
.feed-avatar--quote img {
  top: -995.45%;
}
.feed-avatar--streak img {
  top: -1054.55%;
}
.feed-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 16px;
  overflow-wrap: anywhere;
}
.feed-copy.is-large {
  font-size: 14px;
  line-height: 20px;
}
.feed-expand {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 16px;
  color: #cbc0ad !important;
  align-self: flex-start;
}
.feed-expand span {
  width: 116px;
  text-align: left;
}
.feed-card hr {
  border: 0;
  height: 1px;
  background: #353637;
  margin: 0;
}
.feed-actions {
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: none;
}
.feed-reactions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.feed-actions button {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
}
.feed-reaction {
  width: 56px;
  padding: 0 5px !important;
  border: 1px solid #2b2b2a !important;
  border-radius: 14px;
  background: #111210 !important;
}
.feed-actions small {
  width: 20px;
  text-align: left;
}
.feed-reaction.is-selected {
  border-color: #8047fa !important;
}
.feed-add-reaction {
  justify-content: center;
  width: 28px;
  border: 1px solid #2b2b2a !important;
  border-radius: 14px;
}
.feed-actions > i {
  height: 20px;
  width: 1px;
  background: #353637;
  flex: none;
}
.feed-discussion {
  display: flex;
  gap: 12px;
  flex: none;
}
.feed-discussion button {
  width: 44px;
}
.feed-collection-open {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  width: 100%;
}
.feed-art {
  display: block;
  position: relative;
  height: 136px;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: #111210;
}
.feed-art > img:not(.feed-live-image) {
  position: absolute;
  max-width: none;
}
.feed-art--collection > img {
  width: 116.07%;
  height: 585.48%;
  left: -8.33%;
  top: -338.89%;
}
.feed-live-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feed-media-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feed-media-copy > b {
  font-size: 13px;
  line-height: 18px;
}
.feed-media-copy > small {
  font-size: 12px;
  line-height: 16px;
}
.feed-stars {
  display: flex;
  height: 20px;
  gap: 4px;
}
.feed-review-book {
  height: 108px;
  position: relative;
  border-top: 1px solid #353637;
  border-bottom: 1px solid #353637;
}
.feed-review-book-open {
  position: absolute;
  left: 0;
  top: 11px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 68%;
  text-align: left;
}
.feed-review-book .feed-art {
  width: 56px;
  height: 84px;
  flex: none;
  border-radius: 4px;
}
.feed-art--book > img {
  width: 520%;
  height: 878.22%;
  left: -29.33%;
  top: -214.58%;
}
.feed-review-book-open > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 130px;
}
.feed-review-book b {
  font-size: 13px;
  line-height: 18px;
}
.feed-book-score {
  position: absolute;
  right: 0;
  top: 11px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
  width: 88px;
}
.feed-book-score > b {
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
}
.feed-book-score > small {
  width: 88px;
  text-align: right;
}
.feed-book-add {
  position: absolute;
  right: 0;
  bottom: 6px;
  width: 114px;
  height: 27px;
  background: #111210 !important;
  border: 1px solid #2b2b2a !important;
  border-radius: 999px;
  color: #fafaf7 !important;
  font-size: 10px !important;
  line-height: 16px !important;
}
.feed-card blockquote {
  position: relative;
  padding-left: 14px;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.feed-card blockquote:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 56px;
  background: #f1e2c9;
}
.feed-card blockquote > p {
  font-size: 14px;
  line-height: 20px;
}
.feed-card cite {
  font-style: normal;
  font-size: 10px;
  line-height: 17px;
  color: #cbc0ad;
}
.feed-video {
  position: relative;
  height: 168px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.feed-video > .feed-art {
  height: 168px;
}
.feed-art--video > img {
  width: 116.07%;
  height: 479.03%;
  left: -8.33%;
  top: -90.91%;
}
.feed-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: #111210;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feed-duration {
  position: absolute;
  right: 0;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 24px;
  border-radius: 12px;
  background: #111210;
  color: #f1e2c9 !important;
}
.feed-streak {
  position: relative;
  height: 104px;
  border: 1px solid #ff6c4b;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(
    71.29deg,
    #8e211c 9%,
    #401b1b 28.68%,
    #1f1116 55.74%,
    #562215 75.42%,
    #ff701d 91%
  );
  flex: none;
}
.feed-streak > div {
  position: absolute;
  top: 11px;
  left: 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feed-streak small {
  font-size: 12px;
  line-height: 16px;
  color: #f1e2c9;
}
.feed-streak b {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}
.feed-flame {
  position: absolute;
  left: 197.03px;
  top: -9px;
}
.feed-spark {
  position: absolute;
  left: 188px;
  top: 24px;
}
.feed-intro,
.feed-empty {
  padding: 16px;
  border: 1px solid #353637;
  border-radius: 14px;
  background: #111210;
  color: #cbc0ad;
}
.feed-intro button,
.feed-empty button {
  margin-top: 12px;
  color: #c9afff;
  text-decoration: underline;
}
.feed-empty {
  min-height: 120px;
}
.feed-load-more {
  padding: 12px !important;
  border: 1px solid #353637 !important;
  border-radius: 20px;
}
.feed-demo-badge {
  position: fixed;
  z-index: 35;
  bottom: calc(90px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: #111210;
  border: 1px solid #8047fa;
  border-radius: 20px;
  font-size: 10px;
  white-space: nowrap;
  color: #f1e2c9;
}
.feed-demo-badge button {
  font-size: 20px;
  width: 24px;
  height: 24px;
}
.feed-notice {
  position: fixed;
  z-index: 40;
  bottom: calc(132px + env(safe-area-inset-bottom));
  left: 24px;
  right: 24px;
  padding: 12px;
  border: 1px solid #353637;
  border-radius: 14px;
  background: #171919;
  color: #f1e2c9;
}
.feed-dialog {
  position: fixed;
  max-height: 75dvh;
  width: calc(100% - 42px);
  max-width: 390px;
  border: 1px solid #353637;
  border-radius: 18px;
  padding: 20px;
  background: #171919;
  color: #f1e2c9;
  font:
    300 14px/20px "Geologica Pilcrow",
    sans-serif;
}
.feed-dialog::backdrop {
  background: #0009;
}
.feed-dialog header {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.feed-dialog h2 {
  font-size: 20px;
  line-height: 26px;
}
.feed-dialog header button {
  font-size: 28px;
  width: 30px;
  height: 36px;
}
.feed-dialog p + p {
  margin-top: 12px;
}
.feed-dialog-done {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 16px;
  background: #8047fa !important;
  color: #fafaf7 !important;
  border-radius: 20px;
}
@media (prefers-reduced-motion: reduce) {
  .feed-screen * {
    scroll-behavior: auto !important;
  }
}
.feed-dialog textarea,
.feed-dialog select {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #53554f;
  border-radius: 10px;
  background: #171919;
  color: #f1e2c9;
  font: inherit;
  font-size: 16px;
  padding: 12px;
  resize: vertical;
}
.feed-dialog textarea {
  min-height: 150px;
  max-height: 34dvh;
  line-height: 1.5;
}
.feed-compose-label {
  display: block;
  margin: 16px 0 8px;
}
.feed-publish-visibility {
  color: #c5a8ff !important;
}
.feed-form-error {
  color: #ff936d !important;
}
.feed-dialog .feed-danger {
  padding: 12px;
  border: 1px solid #ff6844;
  border-radius: 12px;
  background: transparent;
  color: #ff936d;
  font: inherit;
  margin: 8px 0;
  width: 100%;
}
.feed-dialog button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.feed-intro button {
  display: inline-block;
  margin: 10px 14px 0 0;
  color: #c5a8ff !important;
}
.feed-reaction-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.feed-reaction-picker button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px;
  min-height: 110px;
  border: 1px solid #53554f;
  border-radius: 14px;
  color: #f1e2c9;
  font: inherit;
}
.feed-reaction-picker button[aria-pressed="true"] {
  border-color: #a276ff;
  background: #8047fa33;
}
.feed-reaction-picker img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.feed-actions button:disabled {
  opacity: 0.55;
}
.feed-copy p {
  white-space: pre-wrap;
}