html {
      scroll-behavior: smooth;
    }


    html,
    body.public-kat-feed-page {
      min-height: 100%;
    }

    body.public-kat-feed-page {
      margin: 0;
      min-height: 100vh;
      overflow-x: hidden;
      background: #090817 url("/backgroundimage1.png") center / cover no-repeat fixed;
    }

    .desktop-kat-feed,
    .kat-feed-home-link {
      box-sizing: border-box;
      width: min(1240px, calc(100% - 48px));
      margin: 0 auto 56px;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: #3b2118;
    }

    .desktop-kat-feed {
      position: relative;
      padding: clamp(12px, 2.4vw, 26px) clamp(22px, 4vw, 46px) clamp(22px, 4vw, 46px);
      border: 3px solid rgba(117, 67, 11, 0.58);
      border-radius: 34px;
      background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 219, 0.58) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 12%, rgba(137, 84, 13, 0.24) 0 1px, transparent 2px),
        radial-gradient(circle at 32% 78%, rgba(255, 255, 236, 0.42) 0 1px, transparent 3px),
        radial-gradient(circle at 84% 68%, rgba(128, 73, 8, 0.18) 0 2px, transparent 4px),
        linear-gradient(135deg, rgba(255, 226, 90, 0.86), rgba(232, 171, 39, 0.84) 45%, rgba(255, 212, 74, 0.86)),
        url("/backgroundimage1.png") center / cover no-repeat;
      background-size: 120px 120px, 88px 88px, 150px 150px, 110px 110px, auto, cover;
      box-shadow:
        inset 0 0 0 2px rgba(255, 250, 188, 0.48),
        inset 0 -34px 70px rgba(135, 78, 12, 0.18),
        0 24px 54px rgba(18, 7, 36, 0.42);
    }

    .public-kitty-corner-page .kitty-corner-home-link,
    .personal-kitty-corner-page .kitty-corner-home-link {
      position: absolute;
      top: 14px;
      left: 14px;
      z-index: 20;
      display: inline-flex;
      width: 54px;
      height: 54px;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 0;
      border: 3px solid rgba(255, 244, 223, 0.9);
      border-radius: 999px;
      background: rgba(255, 244, 223, 0.92);
      box-shadow: 0 10px 24px rgba(33, 12, 2, 0.34);
    }

    .public-kitty-corner-page .kitty-corner-home-link {
      right: 14px;
      left: auto;
    }

    .public-kitty-corner-page .kitty-corner-home-link img,
    .personal-kitty-corner-page .kitty-corner-home-link img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.14);
    }

    .public-kitty-corner-page .kitty-corner-home-link:hover,
    .public-kitty-corner-page .kitty-corner-home-link:focus-visible,
    .personal-kitty-corner-page .kitty-corner-home-link:hover,
    .personal-kitty-corner-page .kitty-corner-home-link:focus-visible {
      transform: translateY(-1px);
      outline: 3px solid rgba(255, 224, 101, 0.82);
      outline-offset: 3px;
    }

    .public-kitty-corner-page .back-to-my-cats,
    .personal-kitty-corner-page .back-to-my-cats {
      position: absolute;
      top: 14px;
      right: 14px;
    }

    .public-kitty-corner-page .back-to-my-cats-arrow,
    .personal-kitty-corner-page .back-to-my-cats-arrow {
      transform: translateY(-3px);
    }

    .public-kitty-corner-page .kat-feed-back-to-top-actions {
      position: fixed;
      right: 0;
      bottom: 14px;
      left: 0;
      z-index: 12;
      justify-content: center;
      margin-top: 22px;
      pointer-events: none;
    }

    .public-kitty-corner-page .kat-feed-back-to-top {
      min-height: 30px;
      padding: 0 12px;
      border: 1px solid rgba(59, 33, 24, 0.22);
      background: rgba(255, 248, 237, 0.38);
      color: rgba(59, 33, 24, 0.76);
      font-size: 0.78rem;
      box-shadow: 0 6px 14px rgba(33, 12, 2, 0.12);
      backdrop-filter: blur(5px);
      pointer-events: auto;
    }

    .public-kitty-corner-page .kat-feed-back-to-top:hover,
    .public-kitty-corner-page .kat-feed-back-to-top:focus-visible {
      background: rgba(255, 248, 237, 0.72);
      color: #3b2118;
    }

    .kat-feed-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin: 0 0 28px;
      padding: 4px 16px 14px;
    }

    .public-kitty-corner-page .kat-feed-header {
      padding-right: clamp(74px, 10vw, 112px);
    }

    .personal-kitty-corner-page .kat-feed-header {
      padding-left: clamp(74px, 10vw, 112px);
    }

    .kat-feed-heading-row {
      display: flex;
      align-items: center;
      gap: 28px;
      flex-wrap: wrap;
    }

    .kat-feed-header-actions {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .kat-feed-title {
      margin: 0;
      color: #d4af37;
      -webkit-text-fill-color: #d4af37;
      -webkit-text-stroke: 1px #000;
      font-size: clamp(1.45rem, 2.2vw, 2.15rem);
      font-weight: 900;
      letter-spacing: -0.02em;
      text-shadow: 0 2px 0 #000, 0 5px 12px rgba(0, 0, 0, 0.62);
      paint-order: stroke fill;
    }

    .kat-feed-image-title {
      line-height: 0;
      text-shadow: none;
    }

    .kat-feed-header-image {
      display: block;
      width: min(100%, 520px);
      height: auto;
    }

    .kat-feed-follow-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 0 16px;
      border: 2px solid rgba(255, 244, 223, 0.72);
      border-radius: 999px;
      background: linear-gradient(135deg, #38b84a, #136b22);
      color: #fff4df;
      font-size: 0.86rem;
      font-weight: 900;
      text-decoration: none;
      box-shadow: 0 8px 18px rgba(19, 107, 34, 0.3);
    }

    .kat-card-header .kat-feed-follow-button {
      min-height: 37px;
      padding: 0 17px;
      font-size: 0.91rem;
    }

    .kat-feed-subtitle {
      margin: 4px 0 0;
      color: #050505;
      font-size: clamp(1.05rem, 1.35vw, 1.35rem);
      font-weight: 900;
      text-shadow: 0 1px 0 rgba(212, 175, 55, 0.9), 0 3px 9px rgba(255, 224, 117, 0.45);
    }

    .kat-feed-guest-prompts {
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, minmax(198px, 267px));
      gap: 18px;
      align-items: stretch;
      justify-content: end;
      flex: 0 1 585px;
      transform: translateX(-115px);
      color: inherit;
      text-decoration: none;
      cursor: pointer;
      border: 3px solid rgba(43, 15, 3, 0.9);
      border-radius: 8px;
      background: linear-gradient(90deg, #7b2cff 0%, #39ff14 100%);
      box-shadow: 0 8px 0 rgba(43, 15, 3, 0.24), 0 12px 22px rgba(48, 10, 3, 0.22);
    }

    .kat-feed-guest-prompts::after {
      content: "AND";
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      transform: translate(-50%, -50%);
      color: #fff4df;
      font-family: "Courier New", Courier, monospace;
      font-size: clamp(1.55rem, 2.65vw, 2.55rem);
      font-weight: 900;
      letter-spacing: -0.06em;
      line-height: 1;
      text-shadow: 0 3px 0 rgba(43, 15, 3, 0.95), 0 0 12px rgba(255, 244, 223, 0.72);
      pointer-events: none;
    }

    .kat-feed-guest-prompts:hover,
    .kat-feed-guest-prompts:focus-visible {
      filter: brightness(1.05);
    }

    .kat-feed-guest-prompts:focus-visible {
      outline: 4px solid rgba(255, 244, 223, 0.95);
      outline-offset: 4px;
    }

    .kat-feed-guest-prompts[hidden] {
      display: none;
    }

    .kat-feed-guest-prompts p {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      min-height: 105px;
      margin: 0;
      padding: 15px 18px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #2b0f03;
      font-family: "Courier New", Courier, monospace;
      font-size: 1.17rem;
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: -0.03em;
      text-transform: none;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
      box-shadow: none;
    }

    .kat-feed-guest-prompts p:first-child {
      transform: translateX(-15px);
      color: #fff;
      text-shadow: 0 2px 0 rgba(43, 15, 3, 0.72);
    }

    .kat-feed-guest-prompts p:nth-child(2) {
      transform: translateX(15px);
    }

    .kat-card-grid {
      display: grid;
      grid-template-columns: repeat(2, max-content);
      justify-content: center;
      column-gap: 25px;
      row-gap: 9px;
      align-items: start;
    }

    .kat-card {
      position: relative;
      box-sizing: border-box;
      width: clamp(321px, 29.1vw, 398px);
      min-width: 0;
      min-height: 394px;
      padding-bottom: 78px;
      border: 1px solid rgba(126, 69, 38, 0.18);
      border-radius: 20px;
      background: #7ec7ea;
      box-shadow: 0 14px 28px rgba(33, 12, 2, 0.28);
      overflow: visible;
    }

    .kat-card:has(.kat-reaction-button:hover),
    .kat-card:has(.kat-reaction-button:focus-visible),
    .kat-card:focus-within {
      z-index: 30;
    }

    .kat-card-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      justify-self: center;
      width: max-content;
      min-height: 0;
      padding: 24px 30px 26px;
    }

    .kat-card-loading-spinner {
      display: block;
      width: clamp(86px, 18vw, 150px);
      height: clamp(86px, 18vw, 150px);
      object-fit: contain;
      animation: kat-loading-spin 900ms linear infinite;
      filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.38));
    }

    .kat-card-loading .kat-card-copy {
      margin: 10px 0 0;
      text-align: center;
      white-space: nowrap;
    }

    .kat-card:nth-child(odd) {
      justify-self: end;
    }

    .kat-card.kat-card-loading,
    .kat-card.kat-card-loading:nth-child(odd),
    .kat-card.kat-card-loading:nth-child(even) {
      justify-self: center;
      width: max-content;
      max-width: calc(100vw - 48px);
      margin-top: 0;
    }

    @media (min-width: 701px) {
      .kat-card:nth-child(even) {
        justify-self: start;
        margin-top: 61px;
      }
    }

    .kat-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 24px 19px 22px;
      color: #3b2118;
      font-weight: 900;
      font-size: 1.22rem;
    }

    .kat-card-header > span:first-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .kat-card-name-button {
      border: 0;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font: inherit;
      font-weight: 900;
      padding: 0;
      text-align: left;
      text-decoration: none;
    }

    .kat-card-name-button:hover,
    .kat-card-name-button:focus-visible {
      text-decoration: none;
    }

    .kat-card-primary-cat-name {
      color: #083d8f;
    }

    .kat-tagged-cat-name {
      color: #ffd84a;
    }

    .kat-tagged-cat-name:hover,
    .kat-tagged-cat-name:focus-visible {
      color: #ffe88a;
    }

    .kat-card-menu-wrap {
      position: relative;
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
    }

    .kat-card-menu-button {
      flex: 0 0 auto;
      border: 0;
      background: transparent;
      color: #5b2c1e;
      cursor: pointer;
      font: inherit;
      line-height: 1;
      padding: 0 4px;
    }

    .kat-card-report-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 12;
      display: none;
      flex-direction: column;
      gap: 10px;
      box-sizing: border-box;
      width: 220px;
      padding: 12px;
      transform: none;
      border: 2px solid rgba(212, 175, 55, 0.85);
      border-radius: 18px;
      background: radial-gradient(circle at top left, #fff4a9, #e87926 48%, #46152b);
      box-shadow: 0 16px 36px rgba(33, 12, 2, 0.36), inset 0 0 0 1px rgba(255, 250, 188, 0.42);
    }

    .kat-card-report-menu.is-open {
      display: flex;
    }

    .kat-card-report-menu .kat-follow-cat-button,
    .kat-report-photo-button {
      width: 100%;
      min-height: 44px;
      border: 2px solid rgba(255, 244, 223, 0.82);
      border-radius: 999px;
      color: #fff4df;
      cursor: pointer;
      font: inherit;
      font-size: 1rem;
      font-weight: 900;
      line-height: 1;
      padding: 0 18px;
      white-space: nowrap;
      box-shadow: 0 8px 18px rgba(86, 24, 9, 0.34);
    }

    .kat-card-report-menu .kat-follow-cat-button {
      background: linear-gradient(135deg, #38b84a, #136b22);
    }

    .kat-report-photo-button {
      background: linear-gradient(135deg, #ff3333, #9f1010);
    }


    .kat-personal-card-menu {
      top: calc(100% + 8px);
      right: 0;
      display: none;
      width: 220px;
      padding: 12px;
      transform: none;
      border: 2px solid rgba(212, 175, 55, 0.85);
      border-radius: 18px;
      background: radial-gradient(circle at top left, #fff4a9, #e87926 48%, #46152b);
      box-shadow: 0 16px 36px rgba(33, 12, 2, 0.36), inset 0 0 0 1px rgba(255, 250, 188, 0.42);
    }

    .kat-personal-card-menu button {
      width: 100%;
      min-height: 44px;
      margin: 0 0 10px;
      border: 2px solid rgba(255, 244, 223, 0.8);
      border-radius: 999px;
      color: #fff4df;
      cursor: pointer;
      font: inherit;
      font-size: 1rem;
      font-weight: 900;
      box-shadow: 0 8px 18px rgba(86, 24, 9, 0.28);
    }

    .kat-personal-card-menu button:last-child { margin-bottom: 0; }
    .kat-personal-profile-photo-button { background: linear-gradient(135deg, #2f9bff, #0b4fab); }
    .kat-personal-cover-photo-button { background: linear-gradient(135deg, #38b84a, #136b22); }
    .kat-personal-edit-caption-button { background: linear-gradient(135deg, #8e5cff, #4b1aa6); }
    .kat-personal-delete-card-button { background: linear-gradient(135deg, #ff3333, #9f1010); }

    .personal-photo-modal {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: none;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 22px;
      background: rgba(16, 7, 31, 0.68);
      backdrop-filter: blur(5px);
    }

    .personal-photo-modal.is-open { display: flex; }
    .personal-photo-modal-card {
      position: relative;
      box-sizing: border-box;
      width: min(640px, 100%);
      max-height: calc(100vh - 44px);
      overflow: auto;
      padding: 28px;
      border: 3px solid rgba(212, 175, 55, 0.82);
      border-radius: 28px;
      background: radial-gradient(circle at top left, rgba(255,244,169,.98), rgba(232,121,38,.97) 44%, rgba(70,21,43,.97));
      color: #fff4df;
      box-shadow: 0 28px 70px rgba(0,0,0,.52), inset 0 0 0 2px rgba(255,250,188,.38);
    }

    .kat-following-feed-button,
    .kat-follow-cat-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 0 18px;
      border: 2px solid rgba(255, 244, 223, 0.82);
      border-radius: 999px;
      background: linear-gradient(135deg, #38b84a, #136b22);
      color: #fff4df;
      cursor: pointer;
      font: inherit;
      font-size: 0.95rem;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
      box-shadow: 0 8px 18px rgba(19, 107, 34, 0.3);
    }

    .kat-feed-switcher {
      display: inline-flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      transform: translateX(125px);
    }

    .kat-feed-switcher[hidden] {
      display: none;
    }

    .kat-feed-switcher-label {
      align-self: center;
      color: #3c1543;
      font-family: "Comic Sans MS", "Trebuchet MS", cursive, sans-serif;
      font-size: 1.45rem;
      font-weight: 1000;
      letter-spacing: 0.035em;
      line-height: 1;
      text-align: center;
      text-shadow: 0 2px 0 rgba(255, 244, 223, 0.72), 0 5px 12px rgba(60, 21, 67, 0.18);
      transform: rotate(-1.5deg);
    }

    .kat-following-feed-button {
      min-height: 76px;
      width: 212px;
      padding: 0 24px;
      border-color: rgba(221, 255, 211, 0.94);
      background: linear-gradient(135deg, #58d968, #1f8f33 58%, #136b22);
      font-size: 1.9rem;
      box-shadow: 0 10px 22px rgba(19, 107, 34, 0.34), inset 0 0 0 2px rgba(255,255,255,.16);
    }

    .kat-following-feed-button[aria-pressed="true"] {
      border-color: rgba(204, 232, 255, 0.94);
      background: linear-gradient(135deg, #2aa8ff, #0d3b88 58%, #061f49);
      box-shadow: 0 10px 22px rgba(6, 31, 73, 0.36), inset 0 0 0 2px rgba(255,255,255,.16);
    }

    .kat-follow-cat-button[aria-pressed="true"] {
      background: linear-gradient(135deg, #5c2cff, #2a136b);
    }

    .kat-card-art {
      height: 299px;
      margin: 21px 0;
      border-radius: 0;
      background:
        radial-gradient(circle at 50% 36%, rgba(255, 239, 195, 0.88) 0 13px, transparent 14px),
        radial-gradient(circle at 50% 52%, #d58a55 0 27px, transparent 28px),
        linear-gradient(160deg, rgba(255, 189, 102, 0.78), rgba(126, 47, 32, 0.88)),
        url("backgroundimage1.png") center / cover;
      box-shadow: inset 0 -32px 50px rgba(72, 23, 11, 0.34);
    }

    .kat-card:nth-child(2) .kat-card-art {
      background:
        radial-gradient(circle at 54% 44%, rgba(255, 240, 204, 0.85) 0 32px, transparent 33px),
        linear-gradient(150deg, rgba(253, 168, 88, 0.7), rgba(70, 31, 23, 0.9)),
        url("backgroundimage1.png") center / cover;
    }

    .kat-card:nth-child(3) .kat-card-art {
      background:
        radial-gradient(circle at 54% 40%, #f0a968 0 22px, transparent 23px),
        radial-gradient(circle at 54% 25%, #ffd7a8 0 17px, transparent 18px),
        linear-gradient(160deg, rgba(255, 200, 99, 0.8), rgba(106, 43, 28, 0.9)),
        url("backgroundimage1.png") center / cover;
    }

    .kat-card:nth-child(4) {
      background: #7ec7ea;
    }

    .sponsored-card,
    .kat-sponsored-card {
      display: flex;
      align-items: stretch;
      justify-content: center;
      padding: 24px;
      background: #c9652e;
    }

    .kat-sponsored-card {
      min-height: 0;
    }

    .sponsored-card-live {
      display: block;
      padding: 15px;
      background: #fff8ed;
    }

    .sponsored-card-label {
      display: block;
      margin: 0 0 10px;
      color: rgba(59, 33, 24, 0.62);
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-align: center;
      text-transform: uppercase;
    }

    .kat-in-feed-ad {
      width: 100%;
      min-height: 280px;
    }

    .sponsored-card-message {
      margin: 0;
      color: #fff4df;
      font-size: clamp(1.45rem, 2.55vw, 2.38rem);
      font-weight: 900;
      line-height: 1.08;
      text-align: center;
      text-shadow: 0 3px 0 rgba(83, 31, 13, 0.3);
    }

    .sponsored-card-setup {
      max-width: 24ch;
      margin: 14px auto 0;
      color: rgba(255, 244, 223, 0.86);
      font-size: 0.95rem;
      font-weight: 800;
      line-height: 1.35;
      text-align: center;
    }

    .sponsored-card-setup code {
      color: #fff;
      font-weight: 900;
    }


    .kat-card:nth-child(5) .kat-card-art {
      background:
        radial-gradient(circle at 50% 35%, #f5be85 0 24px, transparent 25px),
        radial-gradient(circle at 50% 58%, #b96a3d 0 34px, transparent 35px),
        linear-gradient(160deg, rgba(255, 194, 104, 0.85), rgba(81, 39, 28, 0.88)),
        url("backgroundimage1.png") center / cover;
    }

    .kat-card .kat-card-art.has-photo {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 21px 0;
      border-radius: 0;
      background: #7ec7ea;
      overflow: hidden;
    }

    .kat-photo-link {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
    }

    .kat-card-art.has-photo img {
      display: block;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      object-fit: contain;
    }

    .kat-card-copy {
      margin: 15px 19px 0;
      font-size: 1.16rem;
      font-weight: 800;
      line-height: 1.25;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .kat-card-reactions {
      position: absolute;
      inset: auto 19px 19px 19px;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      gap: 12px;
      pointer-events: none;
    }

    .kat-laugh-cluster,
    .kat-heart-cluster,
    .kat-boop-cluster {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      --kat-reaction-x: 0px;
      --kat-reaction-y: 0px;
      transform: translate(var(--kat-reaction-x), var(--kat-reaction-y));
      pointer-events: auto;
    }

    .kat-laugh-cluster {
      z-index: 3;
    }

    .kat-heart-cluster {
      z-index: 2;
    }

    .kat-boop-cluster {
      z-index: 1;
    }

    .public-kat-feed-page .kat-heart-cluster {
      --kat-reaction-x: -10px;
    }

    @media (min-width: 701px) {
      .kat-boop-cluster {
        --kat-reaction-x: 3px;
      }

      .public-kat-feed-page .kat-boop-cluster {
        --kat-reaction-x: 1px;
      }

      .public-kitty-corner-page .kat-boop-cluster,
      .personal-kitty-corner-page .kat-boop-cluster {
        --kat-reaction-x: 4px;
      }
    }

    .kat-laugh-cluster:hover,
    .kat-laugh-cluster:focus-within,
    .kat-heart-cluster:hover,
    .kat-heart-cluster:focus-within,
    .kat-boop-cluster:hover,
    .kat-boop-cluster:focus-within {
      z-index: 4;
    }

    .kat-reaction-button {
      box-sizing: border-box;
      flex: 0 0 52px;
      width: 52px;
      min-width: 52px;
      max-width: 52px;
      height: 52px;
      min-height: 52px;
      max-height: 52px;
      border: 2px solid rgba(59, 33, 24, 0.18);
      border-radius: 999px;
      font-size: 1.65rem;
      line-height: 1;
      padding: 0;
      cursor: pointer;
      transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
      box-shadow: 0 5px 10px rgba(33, 12, 2, 0.18);
    }

    .kat-reaction-button.heart {
      position: relative;
      overflow: hidden;
      background: #e51d2f;
      color: #fff;
    }

    .kat-reaction-button.heart::before {
      content: "♥";
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 0;
      color: #8f0716;
      font: inherit;
      line-height: 1;
      transform: translate(-50%, -54%) scale(1.32);
      pointer-events: none;
    }

    .kat-reaction-button.heart::after {
      content: "♥";
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      color: #fff;
      font: inherit;
      line-height: 1;
      transform: translate(-50%, -54%) scale(0.92);
      pointer-events: none;
    }

    .kat-reaction-button.laugh {
      position: relative;
      background: #ffd84a;
      color: #3b2118;
      text-indent: -1px;
    }

    .kat-reaction-button.boop {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #b98254;
    }

    .kat-reaction-button.boop img {
      position: absolute;
      z-index: 1;
      width: 1.94rem;
      height: 1.94rem;
      object-fit: contain;
      pointer-events: none;
    }

    .kat-laugh-count,
    .kat-heart-count,
    .kat-boop-count {
      position: absolute;
      right: 9px;
      bottom: 7px;
      min-width: 1.1em;
      z-index: 2;
      color: #fff;
      font-size: 0.72rem;
      font-weight: 900;
      line-height: 1;
      text-align: center;
      text-indent: 0;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
      pointer-events: none;
    }



    .kat-heart-cluster[data-tooltip]::after,
    .kat-laugh-cluster[data-tooltip]::after,
    .kat-boop-cluster[data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute;
      left: calc(100% + 12px);
      top: -8px;
      z-index: 20;
      width: max-content;
      max-width: 210px;
      padding: 9px 13px;
      border: 2px solid rgba(212, 175, 55, 0.9);
      border-radius: 14px;
      background: radial-gradient(circle at top left, #fff4a9, #e87926 52%, #46152b);
      color: #fff4df;
      font-size: 0.86rem;
      font-weight: 900;
      line-height: 1.1;
      text-align: center;
      text-indent: 0;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62);
      box-shadow: 0 12px 24px rgba(33, 12, 2, 0.34), inset 0 0 0 1px rgba(255, 250, 188, 0.38);
      opacity: 0;
      pointer-events: none;
      transform: translate(6px, 0) scale(0.96);
      transition: opacity 140ms ease, transform 140ms ease;
      white-space: nowrap;
    }

    .kat-heart-cluster[data-tooltip]::before,
    .kat-laugh-cluster[data-tooltip]::before,
    .kat-boop-cluster[data-tooltip]::before {
      content: "";
      position: absolute;
      left: calc(100% + 6px);
      top: 14px;
      z-index: 21;
      width: 13px;
      height: 13px;
      border-right: 2px solid rgba(212, 175, 55, 0.9);
      border-bottom: 2px solid rgba(212, 175, 55, 0.9);
      background: #e87926;
      opacity: 0;
      pointer-events: none;
      transform: translate(6px, 0) rotate(135deg) scale(0.96);
      transition: opacity 140ms ease, transform 140ms ease;
    }

    .kat-heart-cluster[data-tooltip]:hover::after,
    .kat-heart-cluster[data-tooltip]:focus-within::after,
    .kat-laugh-cluster[data-tooltip]:hover::after,
    .kat-laugh-cluster[data-tooltip]:focus-within::after,
    .kat-boop-cluster[data-tooltip]:hover::after,
    .kat-boop-cluster[data-tooltip]:focus-within::after,
    .kat-heart-cluster[data-tooltip]:hover::before,
    .kat-heart-cluster[data-tooltip]:focus-within::before,
    .kat-laugh-cluster[data-tooltip]:hover::before,
    .kat-laugh-cluster[data-tooltip]:focus-within::before,
    .kat-boop-cluster[data-tooltip]:hover::before,
    .kat-boop-cluster[data-tooltip]:focus-within::before {
      opacity: 1;
    }

    .kat-heart-cluster[data-tooltip]:hover::after,
    .kat-heart-cluster[data-tooltip]:focus-within::after,
    .kat-laugh-cluster[data-tooltip]:hover::after,
    .kat-laugh-cluster[data-tooltip]:focus-within::after,
    .kat-boop-cluster[data-tooltip]:hover::after,
    .kat-boop-cluster[data-tooltip]:focus-within::after {
      transform: translate(0, 0) scale(1);
    }

    .kat-heart-cluster[data-tooltip]:hover::before,
    .kat-heart-cluster[data-tooltip]:focus-within::before,
    .kat-laugh-cluster[data-tooltip]:hover::before,
    .kat-laugh-cluster[data-tooltip]:focus-within::before,
    .kat-boop-cluster[data-tooltip]:hover::before,
    .kat-boop-cluster[data-tooltip]:focus-within::before {
      transform: translate(0, 0) rotate(135deg) scale(1);
    }



    @media (min-width: 701px) {
      .desktop-kat-feed .kat-heart-cluster {
        --kat-reaction-x: -8px;
      }

      .desktop-kat-feed .kat-laugh-cluster {
        --kat-reaction-x: -1px;
      }

      .desktop-kat-feed .kat-boop-cluster {
        --kat-reaction-x: 0px;
      }

      .desktop-kat-feed .kat-heart-cluster[data-tooltip]::after,
      .desktop-kat-feed .kat-laugh-cluster[data-tooltip]::after,
      .desktop-kat-feed .kat-boop-cluster[data-tooltip]::after {
        top: auto;
        bottom: calc(100% + 12px);
        left: 50%;
        transform: translate(-50%, 6px) scale(0.96);
      }

      .desktop-kat-feed .kat-heart-cluster[data-tooltip]::before,
      .desktop-kat-feed .kat-laugh-cluster[data-tooltip]::before,
      .desktop-kat-feed .kat-boop-cluster[data-tooltip]::before {
        top: auto;
        bottom: calc(100% + 5px);
        left: 50%;
        transform: translate(-50%, 6px) rotate(45deg) scale(0.96);
      }

      .desktop-kat-feed .kat-heart-cluster[data-tooltip]:hover::after,
      .desktop-kat-feed .kat-heart-cluster[data-tooltip]:focus-within::after,
      .desktop-kat-feed .kat-laugh-cluster[data-tooltip]:hover::after,
      .desktop-kat-feed .kat-laugh-cluster[data-tooltip]:focus-within::after,
      .desktop-kat-feed .kat-boop-cluster[data-tooltip]:hover::after,
      .desktop-kat-feed .kat-boop-cluster[data-tooltip]:focus-within::after {
        transform: translate(-50%, 0) scale(1);
      }

      .desktop-kat-feed .kat-heart-cluster[data-tooltip]:hover::before,
      .desktop-kat-feed .kat-heart-cluster[data-tooltip]:focus-within::before,
      .desktop-kat-feed .kat-laugh-cluster[data-tooltip]:hover::before,
      .desktop-kat-feed .kat-laugh-cluster[data-tooltip]:focus-within::before,
      .desktop-kat-feed .kat-boop-cluster[data-tooltip]:hover::before,
      .desktop-kat-feed .kat-boop-cluster[data-tooltip]:focus-within::before {
        transform: translate(-50%, 0) rotate(45deg) scale(1);
      }
    }

    @media (max-width: 700px) {
      .kat-heart-cluster[data-tooltip]::after,
      .kat-laugh-cluster[data-tooltip]::after,
      .kat-boop-cluster[data-tooltip]::after,
      .kat-heart-cluster[data-tooltip]::before,
      .kat-laugh-cluster[data-tooltip]::before,
      .kat-boop-cluster[data-tooltip]::before {
        display: none;
      }
    }

    .kat-reaction-button[aria-pressed="true"] {
      outline: 3px solid #8fdcff;
      outline-offset: 3px;
      transform: translateY(-2px) scale(1.08);
      filter: saturate(1.25);
      box-shadow: 0 8px 15px rgba(33, 12, 2, 0.28);
    }

    .kat-card-stats {
      display: none;
    }

    .kat-feed-actions {
      display: grid;
      grid-template-columns: minmax(240px, 1fr);
      gap: 16px;
      margin-top: 18px;
    }


    .kat-feed-load-more-actions {
      justify-items: center;
    }

    .kat-feed-load-more {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 24px;
      border: 2px solid rgba(255, 244, 223, 0.82);
      border-radius: 999px;
      background: linear-gradient(135deg, #38b84a, #136b22);
      color: #fff4df;
      font-size: 1rem;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(19, 107, 34, 0.3);
    }

    .kat-feed-load-more:hover,
    .kat-feed-load-more:focus-visible {
      transform: translateY(-1px);
      outline: 3px solid rgba(255, 224, 101, 0.82);
      outline-offset: 3px;
    }

    .kat-feed-load-more:disabled {
      cursor: wait;
      opacity: 0.72;
      transform: none;
    }

    .kat-feed-load-more-sentinel {
      width: 100%;
      height: 1px;
    }

    .kat-feed-back-to-top-actions {
      display: flex;
      justify-content: center;
      margin-top: 22px;
    }

    .kat-feed-back-to-top {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 0 18px;
      border: 2px solid rgba(255, 244, 223, 0.82);
      border-radius: 999px;
      background: linear-gradient(135deg, #d04722, #8a1f10);
      color: #fff4df;
      font-size: 0.95rem;
      font-weight: 900;
      text-decoration: none;
      box-shadow: 0 8px 18px rgba(86, 24, 9, 0.22);
    }

    .kat-feed-back-to-top:hover,
    .kat-feed-back-to-top:focus-visible {
      transform: translateY(-1px);
      outline: 3px solid rgba(255, 224, 101, 0.82);
      outline-offset: 3px;
    }

    .kat-feed-home-link {
      max-width: 620px;
      padding: 22px;
      border: 2px solid rgba(212, 175, 55, 0.64);
      border-radius: 24px;
      background: rgba(255, 248, 237, 0.88);
      box-shadow: 0 14px 30px rgba(33, 12, 2, 0.34);
    }

    .kat-feed-home-link h2 {
      margin: 0;
      color: #d4af37;
      -webkit-text-fill-color: #d4af37;
      -webkit-text-stroke: 1px #000;
      font-size: clamp(1.25rem, 2.2vw, 2rem);
      font-weight: 900;
      text-shadow: 0 2px 0 #000, 0 5px 12px rgba(0, 0, 0, 0.62);
      paint-order: stroke fill;
    }

    .kat-feed-home-link p {
      margin: 8px 0 16px;
      color: #3b2118;
      font-size: 0.95rem;
      font-weight: 900;
    }

    .kat-feed-action {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 74px;
      padding: 0 22px;
      border-radius: 22px;
      background: linear-gradient(135deg, #d04722, #64180c);
      color: #fff4df;
      text-decoration: none;
      box-shadow: inset 0 0 0 2px rgba(255, 205, 160, 0.32), 0 12px 24px rgba(86, 24, 9, 0.24);
      font-weight: 900;
    }

    .kat-feed-action span {
      display: block;
      color: rgba(255, 244, 223, 0.78);
      font-size: 0.78rem;
      font-weight: 700;
      margin-top: 4px;
    }

    @media (max-width: 900px) {
      .desktop-kat-feed,
      .kat-feed-home-link {
        width: calc(100% - 40px);
      }

      .kat-card-grid {
        column-gap: 18px;
        row-gap: 9px;
      }

      .kat-card {
        width: min(32.1vw, 383px);
        min-width: 0;
      }

      .kat-card:nth-child(even) {
        margin-top: 61px;
      }
    }

    @media (max-width: 700px) and (orientation: portrait) {
      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      body.public-kitty-corner-page,
      body.personal-kitty-corner-page {
        touch-action: pan-y;
      }

      .public-kitty-corner-page main,
      .personal-kitty-corner-page main {
        box-sizing: border-box;
        width: 100%;
        overflow-x: hidden;
      }

      .desktop-kat-feed,
      .kat-feed-home-link {
        width: min(100% - 24px, 420px);
        margin-bottom: 36px;
      }

      .desktop-kat-feed {
        padding: 10px 14px 22px;
        border-radius: 24px;
      }

      .kat-feed-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin: 0 0 18px;
        padding: 4px 12px 12px;
      }

      .public-kitty-corner-page .kitty-corner-home-link,
      .personal-kitty-corner-page .kitty-corner-home-link {
        top: 10px;
        width: 46px;
        height: 46px;
      }

      .public-kitty-corner-page .kitty-corner-home-link {
        right: 10px;
        left: auto;
      }

      .personal-kitty-corner-page .kitty-corner-home-link {
        left: 10px;
      }

      .public-kitty-corner-page .back-to-my-cats,
      .personal-kitty-corner-page .back-to-my-cats {
        top: 10px;
        right: 10px;
        width: 46px;
        height: 46px;
        font-size: 1.72rem;
      }

      .public-kitty-corner-page .kat-feed-header,
      .personal-kitty-corner-page .kat-feed-header {
        padding-right: 58px;
        padding-left: 58px;
      }

      .kat-feed-heading-row,
      .kat-feed-header-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
      }

      .kat-feed-guest-prompts {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        flex-basis: auto;
        transform: none;
      }

      .kat-feed-guest-prompts p {
        min-height: 64px;
        padding: 8px 9px;
        font-size: 0.68rem;
      }

      .kat-card-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 12px;
      }

      .kat-card,
      .kat-card:nth-child(odd),
      .kat-card:nth-child(even) {
        justify-self: center;
        width: min(100%, 326px);
        min-width: 0;
        margin-top: 0;
      }


      .kat-card-reactions {
        justify-content: space-evenly;
        gap: 0;
      }

      .public-kat-feed-page .kat-card-reactions,
      .public-kitty-corner-page .kat-card-reactions,
      .personal-kitty-corner-page .kat-card-reactions {
        justify-content: flex-end;
        gap: 16px;
      }

      .kat-laugh-cluster,
      .kat-boop-cluster {
        --kat-reaction-x: 0px;
        --kat-reaction-y: 0px;
      }

      .kat-laugh-cluster {
        --kat-reaction-x: 1px;
      }

      .public-kat-feed-page .kat-heart-cluster[data-tooltip]::after,
      .public-kat-feed-page .kat-laugh-cluster[data-tooltip]::after,
      .public-kat-feed-page .kat-boop-cluster[data-tooltip]::after,
      .public-kitty-corner-page .kat-heart-cluster[data-tooltip]::after,
      .public-kitty-corner-page .kat-laugh-cluster[data-tooltip]::after,
      .public-kitty-corner-page .kat-boop-cluster[data-tooltip]::after,
      .personal-kitty-corner-page .kat-heart-cluster[data-tooltip]::after,
      .personal-kitty-corner-page .kat-laugh-cluster[data-tooltip]::after,
      .personal-kitty-corner-page .kat-boop-cluster[data-tooltip]::after {
        top: auto;
        bottom: calc(100% + 12px);
        left: 50%;
        max-width: min(210px, calc(100vw - 36px));
        white-space: normal;
        display: block;
      }

      .public-kat-feed-page .kat-heart-cluster[data-tooltip]::before,
      .public-kat-feed-page .kat-laugh-cluster[data-tooltip]::before,
      .public-kat-feed-page .kat-boop-cluster[data-tooltip]::before,
      .public-kitty-corner-page .kat-heart-cluster[data-tooltip]::before,
      .public-kitty-corner-page .kat-laugh-cluster[data-tooltip]::before,
      .public-kitty-corner-page .kat-boop-cluster[data-tooltip]::before,
      .personal-kitty-corner-page .kat-heart-cluster[data-tooltip]::before,
      .personal-kitty-corner-page .kat-laugh-cluster[data-tooltip]::before,
      .personal-kitty-corner-page .kat-boop-cluster[data-tooltip]::before {
        top: auto;
        bottom: calc(100% + 5px);
        left: 50%;
        display: block;
      }

      .public-kat-feed-page .kat-heart-cluster[data-tooltip]::after,
      .public-kitty-corner-page .kat-heart-cluster[data-tooltip]::after,
      .personal-kitty-corner-page .kat-heart-cluster[data-tooltip]::after {
        left: 0;
        transform: translate(0, 6px) scale(0.96);
      }

      .public-kat-feed-page .kat-laugh-cluster[data-tooltip]::after,
      .public-kitty-corner-page .kat-laugh-cluster[data-tooltip]::after,
      .personal-kitty-corner-page .kat-laugh-cluster[data-tooltip]::after {
        transform: translate(-50%, 6px) scale(0.96);
      }

      .public-kat-feed-page .kat-boop-cluster[data-tooltip]::after,
      .public-kitty-corner-page .kat-boop-cluster[data-tooltip]::after,
      .personal-kitty-corner-page .kat-boop-cluster[data-tooltip]::after {
        right: 0;
        left: auto;
        transform: translate(0, 6px) scale(0.96);
      }

      .public-kat-feed-page .kat-heart-cluster[data-tooltip]:hover::after,
      .public-kat-feed-page .kat-heart-cluster[data-tooltip]:focus-within::after,
      .public-kitty-corner-page .kat-heart-cluster[data-tooltip]:hover::after,
      .public-kitty-corner-page .kat-heart-cluster[data-tooltip]:focus-within::after,
      .personal-kitty-corner-page .kat-heart-cluster[data-tooltip]:hover::after,
      .personal-kitty-corner-page .kat-heart-cluster[data-tooltip]:focus-within::after,
      .public-kat-feed-page .kat-boop-cluster[data-tooltip]:hover::after,
      .public-kat-feed-page .kat-boop-cluster[data-tooltip]:focus-within::after,
      .public-kitty-corner-page .kat-boop-cluster[data-tooltip]:hover::after,
      .public-kitty-corner-page .kat-boop-cluster[data-tooltip]:focus-within::after,
      .personal-kitty-corner-page .kat-boop-cluster[data-tooltip]:hover::after,
      .personal-kitty-corner-page .kat-boop-cluster[data-tooltip]:focus-within::after {
        transform: translate(0, 0) scale(1);
      }

      .public-kat-feed-page .kat-laugh-cluster[data-tooltip]:hover::after,
      .public-kat-feed-page .kat-laugh-cluster[data-tooltip]:focus-within::after,
      .public-kitty-corner-page .kat-laugh-cluster[data-tooltip]:hover::after,
      .public-kitty-corner-page .kat-laugh-cluster[data-tooltip]:focus-within::after,
      .personal-kitty-corner-page .kat-laugh-cluster[data-tooltip]:hover::after,
      .personal-kitty-corner-page .kat-laugh-cluster[data-tooltip]:focus-within::after {
        transform: translate(-50%, 0) scale(1);
      }

      .public-kat-feed-page .kat-heart-cluster[data-tooltip]::before,
      .public-kitty-corner-page .kat-heart-cluster[data-tooltip]::before,
      .personal-kitty-corner-page .kat-heart-cluster[data-tooltip]::before {
        left: 20px;
      }

      .public-kat-feed-page .kat-boop-cluster[data-tooltip]::before,
      .public-kitty-corner-page .kat-boop-cluster[data-tooltip]::before,
      .personal-kitty-corner-page .kat-boop-cluster[data-tooltip]::before {
        right: 20px;
        left: auto;
      }

      .kat-feed-actions {
        grid-template-columns: 1fr;
        gap: 12px;
      }

    }

    .cat-popup-overlay { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(16, 7, 31, 0.72); backdrop-filter: blur(5px); }
    .cat-popup-overlay.is-open { display: flex; }
    .cat-popup-card { position: relative; box-sizing: border-box; width: min(920px, 100%); max-height: calc(100vh - 44px); overflow: auto; padding: clamp(20px, 4vw, 34px); border: 3px solid rgba(212, 175, 55, 0.82); border-radius: 30px; background: radial-gradient(circle at 12% 12%, rgba(255, 244, 169, 0.98), rgba(232, 121, 38, 0.97) 44%, rgba(70, 21, 43, 0.97)); box-shadow: 0 28px 70px rgba(0,0,0,.52), inset 0 0 0 2px rgba(255,250,188,.38); color: #fff4df; }
    .cat-popup-close { position: absolute; right: 18px; top: 16px; width: 42px; height: 42px; border: 2px solid rgba(255,244,223,.78); border-radius: 999px; background: #2b160e; color: #fff4df; cursor: pointer; font-size: 1.55rem; font-weight: 900; line-height: 1; box-shadow: 0 8px 18px rgba(0,0,0,.28); }
    .cat-popup-title { margin: 0 48px 8px 0; color: #d4af37; -webkit-text-fill-color: #d4af37; -webkit-text-stroke: 1px #000; font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 900; text-shadow: 0 2px 0 #000, 0 6px 14px rgba(0,0,0,.62); }
    .cat-popup-subtitle { margin: 0 0 20px; color: #fff4df; font-weight: 900; text-shadow: 0 2px 6px rgba(0,0,0,.55); }
    .cat-photo-feed { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
    .cat-photo-tile { min-height: 230px; border: 2px solid rgba(255,244,223,.42); border-radius: 22px; background: rgba(43, 22, 14, 0.42) center / contain no-repeat; box-shadow: inset 0 -42px 58px rgba(43,22,14,.34), 0 12px 24px rgba(33,12,2,.28); }
    .cat-photo-empty { margin: 0; padding: 22px; border-radius: 18px; background: rgba(255,244,223,.22); font-weight: 900; }
    body.cat-popup-open { overflow: hidden; }

    .cat-popup-overlay { align-items: stretch; justify-content: stretch; padding: 0; }
    .cat-popup-card { width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; overflow-x: hidden; overflow-y: auto; padding: clamp(16px, 3vw, 34px); }
    .cat-photo-feed { display: block; max-width: min(1180px, calc(100vw - 32px)); margin: 0 auto; }
    .cat-corner-profile { box-sizing: border-box; overflow: hidden; width: min(760px, 100%); margin: 0 auto 34px; border: 2px solid rgba(255, 244, 223, 0.7); border-radius: 8px; background: #fff4df; color: #2b160e; box-shadow: 0 16px 36px rgba(33,12,2,.34); font-family: Arial, Helvetica, sans-serif; }
    .cat-corner-cover { position: relative; display: flex; min-height: clamp(140px, 24vw, 290px); align-items: flex-end; padding: 18px; background: linear-gradient(135deg, #163b79, #f08a45 52%, #64180c); background-position: center; background-size: cover; color: rgba(255,255,255,.9); font-size: clamp(1.8rem, 6vw, 4.5rem); font-weight: 900; letter-spacing: -0.06em; text-shadow: 0 3px 10px rgba(0,0,0,.5); }
    .cat-corner-cover-empty { background-image: linear-gradient(135deg, #163b79, #2f9bff 36%, #f08a45 70%, #64180c); }
    .cat-corner-follow-row { display: flex; justify-content: flex-end; padding: 12px 22px 0; }
    .cat-corner-info { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 25px; align-items: start; padding: 0 22px 22px; }
    .cat-corner-avatar { width: 150px; height: 150px; margin-top: -48px; border: 5px solid #fff4df; border-radius: 50%; background: linear-gradient(160deg, #f5be85, #7e2f20), url("../../backgroundimage1.png") center / cover; background-position: center; background-size: cover; box-shadow: 0 10px 24px rgba(33,12,2,.32); }
    .cat-corner-copy h3 { margin: 12px 0 0; color: #102c62; font-size: clamp(1.8rem, 4vw, 3rem); line-height: .95; }
    .cat-corner-handle { margin: 4px 0 10px; color: #6d7f9f; font-weight: 900; }
    .cat-corner-bio { margin: 0; padding: 0; border: 0; background: transparent; color: #2b160e; font-size: calc(1.05rem + 2pt); font-weight: 900; line-height: 1.35; }
    .cat-corner-details { margin: 10px 0 0; color: #5d3a25; font-size: .92rem; font-weight: 900; }
    .cat-corner-details-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
    .cat-corner-details-row .cat-corner-details { margin: 0; }
    .cat-corner-follow-wrap { position: relative; display: inline-flex; align-items: center; }
    .cat-corner-follow-button { min-height: 38px; padding: 0 18px; border-color: rgba(221, 255, 211, 0.96); font-size: .95rem; box-shadow: 0 8px 18px rgba(19, 107, 34, 0.3); }
    .cat-corner-follow-button[aria-pressed="true"] { border-color: rgba(210, 186, 255, 0.98); background: linear-gradient(135deg, #7d4dff, #4b1fa8); box-shadow: 0 8px 18px rgba(75, 31, 168, 0.3); }
    .cat-corner-follow-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; min-width: 128px; padding: 8px; border: 2px solid rgba(159, 16, 16, 0.18); border-radius: 16px; background: #fff8ed; box-shadow: 0 14px 28px rgba(43, 22, 14, 0.22); }
    .cat-corner-unfollow-button { width: 100%; min-height: 34px; border: 0; border-radius: 12px; background: #d82020; color: #fff4df; cursor: pointer; font: 900 .9rem/1 Arial, Helvetica, sans-serif; }
    .cat-corner-unfollow-button:hover, .cat-corner-unfollow-button:focus-visible { background: #9f1010; }
    .kat-card-grid > .cat-corner-profile,
    .kat-card-grid > .cat-corner-feed { grid-column: 1 / -1; }
    .cat-corner-feed { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; justify-items: center; width: 100%; gap: 25px; align-items: start; }
    .cat-corner-card { font-family: Arial, Helvetica, sans-serif; }
    .cat-corner-feed > .kat-sponsored-card { grid-column: 1 / -1; justify-self: center; width: min(100%, 520px); margin-top: 0; }
    @media (min-width: 901px) { .cat-corner-card:nth-child(odd) { justify-self: end; } .cat-corner-card:nth-child(even) { justify-self: start; margin-top: 120px; } }
    @media (max-width: 900px) { .cat-corner-feed { grid-template-columns: 1fr; } .cat-corner-card, .cat-corner-card:nth-child(odd), .cat-corner-card:nth-child(even) { justify-self: center; width: min(100%, 520px); margin-top: 0; } }
    @media (max-width: 700px) { .cat-corner-profile { margin-bottom: 24px; } .cat-corner-info { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 0 14px 16px; } .cat-corner-avatar { width: 96px; height: 96px; margin-top: -28px; } .cat-corner-bio { font-size: calc(.94rem + 2pt); } .cat-corner-details-row { align-items: flex-start; flex-direction: column; } }

.cover-photo-hover-button {
  align-self: flex-end;
  margin-left: auto;
  padding: 10px 16px;
  border: 2px solid rgba(255, 244, 223, 0.9);
  border-radius: 999px;
  background: rgba(43, 22, 14, 0.82);
  color: #fff4df;
  cursor: pointer;
  font: 900 0.95rem Arial, Helvetica, sans-serif;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
}

.cat-corner-cover:hover .cover-photo-hover-button,
.cover-photo-hover-button:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.cover-photo-card label {
  display: block;
  margin: 18px 0 8px;
  font-weight: 900;
}

@media (max-width: 700px) and (orientation: portrait) {
  .cover-photo-card .cat-popup-title {
    color: #fff4df;
    -webkit-text-fill-color: #fff4df;
    -webkit-text-stroke: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(1.45rem, 7vw, 2rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  }
}

.cover-photo-card input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 2px solid rgba(255, 244, 223, 0.72);
  border-radius: 14px;
  background: #fff8ed;
  color: #2b160e;
  font-weight: 900;
}

.cover-photo-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.cover-photo-choice {
  overflow: hidden;
  padding: 0 0 12px;
  border: 2px solid rgba(255, 244, 223, 0.72);
  border-radius: 18px;
  background: rgba(43, 22, 14, 0.52);
  color: #fff4df;
  cursor: pointer;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(33, 12, 2, 0.28);
}

.cover-photo-choice img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  margin-bottom: 10px;
}

.cover-photo-upload-button {
  width: 100%;
  margin-top: 12px;
  border: 0;
}

.cover-photo-adjuster {
  margin: 18px 0 0;
  padding: 16px;
  border: 2px solid rgba(255, 244, 223, 0.72);
  border-radius: 22px;
  background: rgba(43, 22, 14, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 250, 188, 0.24);
}

.cover-photo-adjuster h3 {
  margin: 0 0 8px;
  color: #fff4df;
  font-size: 1.35rem;
  font-weight: 900;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.48);
}

.cover-photo-adjuster p {
  margin: 0 0 14px;
  font-weight: 900;
}

.cover-photo-preview {
  box-sizing: border-box;
  width: min(760px, 100%);
  min-height: clamp(140px, 24vw, 290px);
  margin: 0 auto;
  border: 3px solid rgba(255, 244, 223, 0.82);
  border-radius: 16px;
  background-color: rgba(16, 7, 31, 0.5);
  background-repeat: no-repeat;
  background-size: cover;
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-shadow: inset 0 -48px 70px rgba(43, 22, 14, 0.24), 0 12px 24px rgba(33, 12, 2, 0.28);
}

.cover-photo-preview:active {
  cursor: grabbing;
}

.cover-photo-preview:focus-visible {
  outline: 4px solid rgba(212, 175, 55, 0.95);
  outline-offset: 4px;
}

.cover-photo-save-button {
  width: 100%;
  margin-top: 16px;
  border: 0;
}

.kat-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: none;
}

.kat-loading-overlay.is-feed-loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  min-height: 100%;
  align-items: flex-start;
  box-sizing: border-box;
  padding-top: var(--kat-loading-feed-top, 50vh);
}

.kat-loading-overlay.is-active {
  display: flex;
}

.kat-loading-overlay img {
  width: clamp(86px, 18vw, 150px);
  height: clamp(86px, 18vw, 150px);
  object-fit: contain;
  animation: kat-loading-spin 900ms linear infinite;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.38));
}

@keyframes kat-loading-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cover-photo-upload-button,
.cover-photo-save-button {
  cursor: pointer;
}

.cat-corner-profile {
  position: relative;
}

.cat-corner-info {
  position: relative;
}

.cat-details-menu {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 3;
}

.cat-details-menu-button {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(16, 44, 98, 0.24);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff8df, #f5be85);
  color: #102c62;
  cursor: pointer;
  font: 900 1.25rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  box-shadow: 0 8px 18px rgba(33, 12, 2, 0.18);
}

.cat-details-menu-button:hover,
.cat-details-menu-button:focus-visible {
  outline: 3px solid rgba(240, 138, 69, 0.45);
  outline-offset: 2px;
  transform: translateY(-1px);
}

.cat-details-menu-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 150px;
  padding: 8px;
  border: 2px solid rgba(212, 175, 55, 0.82);
  border-radius: 16px;
  background: #fff4df;
  box-shadow: 0 14px 28px rgba(33, 12, 2, 0.28);
}

.cat-details-edit-button {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #163b79, #a92d16);
  color: #fff4df;
  cursor: pointer;
  font: 900 0.95rem Arial, Helvetica, sans-serif;
  white-space: nowrap;
}

.cat-details-card {
  width: min(620px, calc(100vw - 24px));
  height: auto;
  max-height: calc(100vh - 44px);
  border-radius: 30px;
}

.cat-details-form {
  display: grid;
  gap: 14px;
}

.cat-details-form label,
.cat-details-birthday legend {
  color: #fff4df;
  font-weight: 900;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.42);
}

.cat-details-form input,
.cat-details-form select,
.cat-details-form textarea {
  box-sizing: border-box;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 2px solid rgba(255, 244, 223, 0.82);
  border-radius: 16px;
  background: rgba(255, 244, 223, 0.94);
  color: #2b160e;
  font: 800 1rem Arial, Helvetica, sans-serif;
}

.cat-details-form textarea {
  resize: vertical;
}

.cat-details-birthday {
  margin: 0;
  padding: 0;
  border: 0;
}

.cat-details-date-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.cat-details-save-button {
  margin-top: 4px;
  justify-self: start;
}

.cat-popup-subtitle.error {
  color: #ffe065;
}

@media (max-width: 700px) {
  .cat-details-menu {
    right: 10px;
    bottom: 10px;
  }

  .cat-details-menu-button {
    width: 38px;
    height: 38px;
  }

  .cat-details-date-grid {
    grid-template-columns: 1fr;
  }
}

#catDetailsModal.cat-popup-overlay {
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.kat-feed-bonus-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 3px solid rgba(255, 244, 223, 0.9);
  border-radius: 999px;
  background: linear-gradient(135deg, #ffcf40, #f08a45 52%, #a92d16);
  color: #2b0f03;
  font-size: 1rem;
  font-weight: 1000;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 244, 223, 0.72);
  box-shadow: 0 12px 24px rgba(43, 15, 3, 0.32), inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.kat-feed-bonus-link:hover,
.kat-feed-bonus-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(43, 15, 3, 0.38), inset 0 0 0 2px rgba(255, 255, 255, 0.28);
}

.kat-card-detail-page {
  margin-top: 48px;
}

.kat-card-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  align-items: stretch;
}

.kat-card-detail-grid > .kat-card {
  height: 100%;
}

.kat-fact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.kat-fact-label {
  margin: 0 0 12px;
  color: #7a3b17;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kat-fact-copy {
  margin: auto 0;
  font-family: "Comic Sans MS", "Trebuchet MS", "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
  font-size: clamp(1.2rem, 2.35vw, 1.8rem);
  font-weight: 900;
  line-height: 1.35;
}

.kat-card-detail-link {
  margin: 22px 0 0;
  text-align: center;
  font-weight: 900;
}

.kat-card-detail-link a {
  color: #3b2118;
}

/* Compact public photo detail layout: keep the Kat Card, three fact cards, and ad visible together. */
.kat-card-detail-page {
  width: min(1184px, calc(100% - 28px));
  min-height: auto;
  margin-top: clamp(8px, 2vh, 20px);
  margin-bottom: 18px;
  padding: clamp(10px, 1.8vw, 20px);
}

.kat-card-detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
  align-items: stretch;
}

.kat-card-detail-grid > .kat-card {
  width: 100%;
  min-height: clamp(240px, 49.6vh, 448px);
  padding-bottom: clamp(37px, 5.6vh, 54px);
  overflow: hidden;
}

.kat-card-detail-grid .kat-card-header {
  padding: clamp(8px, 1.04vw, 13px) clamp(10px, 1.12vw, 13px);
  font-size: clamp(0.72rem, 1.04vw, 0.9rem);
}

.kat-card-detail-grid .kat-card .kat-card-art.has-photo {
  height: clamp(136px, 28.8vh, 312px);
  margin: clamp(6px, 1.12vh, 11px) 0;
}

.kat-card-detail-grid .kat-card-copy {
  margin: clamp(6px, 1.04vh, 10px) clamp(10px, 1.12vw, 13px) 0;
  font-size: clamp(0.66rem, 0.92vw, 0.8rem);
  line-height: 1.18;
}

.kat-card-detail-grid .kat-card-reactions {
  inset: auto clamp(8px, 1.12vw, 13px) clamp(8px, 1.12vw, 13px) clamp(8px, 1.12vw, 13px);
}

.kat-card-detail-grid .kat-reaction-button {
  min-width: clamp(30px, 3.84vw, 43px);
  min-height: clamp(30px, 3.84vw, 43px);
  font-size: clamp(0.8rem, 1.36vw, 1.12rem);
}

.kat-card-detail-grid .kat-fact-card {
  padding: clamp(11px, 1.44vw, 18px);
}

.kat-card-detail-grid .kat-fact-label {
  margin-bottom: clamp(6px, 1vh, 10px);
  font-size: clamp(0.58rem, 0.8vw, 0.76rem);
}

.kat-card-detail-grid .kat-fact-copy {
  font-size: clamp(1.08rem, 2.15vw, 1.55rem);
  line-height: 1.18;
}

.kat-card-detail-grid .sponsored-card-message {
  font-size: clamp(1rem, 2.1vw, 1.8rem);
}

.kat-card-detail-grid .sponsored-card-setup {
  font-size: clamp(0.72rem, 1vw, 0.9rem);
}

@media (max-width: 900px) and (orientation: portrait) {
  .kat-card-detail-page {
    width: calc(100% - 12px);
    margin-top: 6px;
    margin-bottom: 8px;
    padding: 6px;
    border-radius: 18px;
  }

  .kat-card-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .kat-card-detail-grid > .kat-card,
  .kat-card-detail-grid > .kat-card:nth-child(odd),
  .kat-card-detail-grid > .kat-card:nth-child(even) {
    justify-self: stretch;
    width: 100%;
    min-height: calc((100vh - 96px) / 2.5);
    margin-top: 0;
    padding-bottom: 34px;
    border-radius: 12px;
  }

  .kat-card-detail-grid .kat-card-header {
    padding: 6px 8px;
    gap: 6px;
    font-size: 0.68rem;
  }

  .kat-card-detail-grid .kat-card .kat-card-art.has-photo {
    height: clamp(86px, 20vh, 150px);
    margin: 4px 0;
  }

  .kat-card-detail-grid .kat-card-copy {
    margin: 4px 7px 0;
    font-size: clamp(0.58rem, 2.55vw, 0.76rem);
    line-height: 1.08;
  }

  .kat-card-detail-grid .kat-card-reactions {
    inset: auto 6px 6px 6px;
    gap: 4px;
    justify-content: flex-end;
  }

  .kat-card-detail-grid .kat-reaction-button {
    min-width: 27px;
    min-height: 27px;
    border-width: 2px;
    font-size: 0.76rem;
  }

  .kat-card-detail-grid .kat-reaction-button img {
    width: 16px;
    height: 16px;
  }

  .kat-card-detail-grid .kat-fact-card,
  .kat-card-detail-grid .sponsored-card {
    padding: 8px;
  }

  .kat-card-detail-grid .kat-fact-label,
  .kat-card-detail-grid .sponsored-card-label {
    margin-bottom: 4px;
    font-size: 0.5rem;
    letter-spacing: 0.08em;
  }

  .kat-card-detail-grid .kat-fact-copy {
    font-size: clamp(0.82rem, 4.1vw, 1.14rem);
    line-height: 1.12;
  }

  .kat-card-detail-grid .sponsored-card-message {
    font-size: clamp(0.82rem, 4vw, 1.25rem);
  }

  .kat-card-detail-grid .sponsored-card-setup {
    margin-top: 4px;
    font-size: 0.58rem;
    line-height: 1.12;
  }

  .kat-card-detail-link {
    margin-top: 6px;
    font-size: 0.76rem;
  }
}

/* Photo detail pages must render the Kat Card itself with the same layout as public feed cards. */
.kat-card-detail-grid {
  grid-template-columns: max-content repeat(3, minmax(0, 1fr));
  align-items: start;
}

.kat-card-detail-grid > .kat-card,
.kat-card-detail-grid > .kat-card:nth-child(odd),
.kat-card-detail-grid > .kat-card:nth-child(even) {
  width: clamp(321px, 29.1vw, 398px);
  height: auto;
  min-height: 394px;
  padding-bottom: 78px;
  border-radius: 20px;
  overflow: visible;
}

.kat-card-detail-grid .kat-card-header {
  padding: 18px 19px 0;
  font-size: clamp(1rem, 1.8vw, 1.45rem);
}

.kat-card-detail-grid .kat-card .kat-card-art.has-photo {
  height: 299px;
  margin: 21px 0;
}

.kat-card-detail-grid .kat-card-copy {
  margin: 15px 19px 0;
  font-size: 1.16rem;
  line-height: 1.25;
}

.kat-card-detail-grid .kat-card-reactions {
  inset: auto 19px 19px 19px;
  gap: 12px;
  justify-content: flex-end;
}

.kat-card-detail-grid .kat-reaction-button {
  flex-basis: 52px;
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  font-size: 1.65rem;
}

.kat-card-detail-grid .kat-reaction-button.boop img {
  width: 1.94rem;
  height: 1.94rem;
}

@media (max-width: 900px) and (orientation: portrait) {
  .kat-card-detail-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .kat-card-detail-grid > .kat-photo-detail-card,
  .kat-card-detail-grid > .kat-photo-detail-card:nth-child(odd),
  .kat-card-detail-grid > .kat-photo-detail-card:nth-child(even) {
    justify-self: center;
    width: min(398px, calc(100vw - 112px));
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
}

/* Refinements for the individual Kat Card page requested after matching the feed card. */
.kat-card-detail-grid > .kat-photo-detail-card,
.kat-card-detail-grid > .kat-photo-detail-card:nth-child(odd),
.kat-card-detail-grid > .kat-photo-detail-card:nth-child(even) {
  position: relative;
  z-index: 20;
}

.kat-card-detail-grid .kat-photo-detail-card .kat-card-header {
  font-size: clamp(0.9rem, 1.18vw, 1.08rem);
}

.kat-card-detail-grid > .kat-fact-card,
.kat-card-detail-grid > .kat-fact-card:nth-child(odd),
.kat-card-detail-grid > .kat-fact-card:nth-child(even) {
  width: calc(clamp(321px, 29.1vw, 398px) * 0.7);
  min-height: calc(394px * 0.7);
  padding-bottom: 0;
  justify-self: center;
}

.kat-card-detail-grid .kat-fact-card .kat-fact-label {
  font-size: clamp(0.48rem, 0.56vw, 0.62rem);
}

.kat-card-detail-grid .kat-fact-card .kat-fact-copy {
  margin: 10px 13px 0;
  font-size: clamp(0.76rem, 1.5vw, 1.08rem);
}

.kat-card-detail-ad {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  max-height: inherit;
  padding: 12px;
  border: 3px solid rgba(255, 244, 223, 0.92);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 216, 75, 0.96), rgba(240, 138, 69, 0.96) 52%, rgba(90, 23, 71, 0.96));
  color: #2b0f03;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), inset 0 0 0 2px rgba(255, 250, 188, 0.24);
  text-align: center;
}

.kat-card-detail-ad .kat-whack-side-label {
  display: block;
  margin: 0 0 10px;
  color: rgba(43, 15, 3, 0.72);
  font-size: 0.78rem;
  font-weight: 1000;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kat-card-detail-ad .kat-whack-side-ad-unit,
.kat-card-detail-ad .kat-whack-side-ad-placeholder {
  box-sizing: border-box;
  width: 100%;
  min-height: 190px;
  border: 2px dashed rgba(43, 15, 3, 0.45);
  border-radius: 16px;
  background: rgba(255, 244, 223, 0.72);
}

.kat-card-detail-ad .kat-whack-side-ad-placeholder {
  display: grid;
  place-items: center;
  color: #5a1747;
  font-weight: 1000;
}

.kat-card-detail-ad .kat-whack-side-skip {
  min-height: 38px;
  margin-top: 10px;
  padding: 0 16px;
  border: 2px solid rgba(255, 244, 223, 0.9);
  border-radius: 999px;
  background: linear-gradient(135deg, #38b84a, #136b22);
  color: #fff4df;
  font-weight: 1000;
  cursor: wait;
  opacity: 0.7;
  filter: grayscale(0.35);
}

/* Final detail-page refinements: fill the yellow panel, tighten facts, and use feed ad styling. */
.kat-card-detail-page {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  border-radius: 0;
}

.kat-card-detail-grid > .kat-fact-card,
.kat-card-detail-grid > .kat-fact-card:nth-child(odd),
.kat-card-detail-grid > .kat-fact-card:nth-child(even) {
  width: min(260px, calc(100vw - 40px));
  min-height: 0;
  height: auto;
  padding: 18px 16px;
  border-radius: 18px;
  align-self: start;
}

.kat-card-detail-grid .kat-fact-card .kat-fact-copy {
  margin: 8px 0 0;
}

.kat-card-detail-grid > .kat-card-detail-ad,
.kat-card-detail-grid > .kat-card-detail-ad:nth-child(odd),
.kat-card-detail-grid > .kat-card-detail-ad:nth-child(even) {
  display: block;
  width: clamp(321px, 29.1vw, 398px);
  min-height: 394px;
  padding: 15px;
  border: 1px solid rgba(126, 69, 38, 0.18);
  border-radius: 20px;
  background: #fff8ed;
  color: #2b160e;
  box-shadow: 0 8px 20px rgba(33, 12, 2, 0.14);
  text-align: initial;
}

.kat-card-detail-ad .kat-in-feed-ad {
  min-height: 374px;
}

.kat-sponsored-card .sponsored-card-label {
  display: block;
  margin: 0 0 10px;
  color: rgba(43, 22, 14, 0.58);
  font-size: 0.76rem;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.kat-sponsored-card .kat-in-feed-ad {
  display: block;
  width: 100%;
  min-height: 320px;
  border: 2px dashed rgba(126, 69, 38, 0.28);
  border-radius: 16px;
  background: rgba(255, 244, 223, 0.62);
}

.kat-sponsored-card .kat-ad-review-note {
  margin: 10px 0 0;
  color: rgba(43, 22, 14, 0.66);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

@media (max-width: 900px) and (orientation: portrait) {
  .kat-card-detail-page {
    width: 100%;
    min-height: 100vh;
  }
}

/* Home logo button for individual Kat Card detail pages. */
.kat-card-detail-page .kat-card-detail-home-link {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 40;
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  border: 3px solid rgba(255, 244, 223, 0.9);
  border-radius: 999px;
  background: rgba(255, 244, 223, 0.92);
  box-shadow: 0 10px 24px rgba(33, 12, 2, 0.34);
}

.kat-card-detail-page .kat-card-detail-home-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
}

.kat-card-detail-page .kat-card-detail-home-link:hover,
.kat-card-detail-page .kat-card-detail-home-link:focus-visible {
  transform: translateY(-1px);
  outline: 3px solid rgba(255, 224, 101, 0.82);
  outline-offset: 3px;
}

/* Kat Card detail-page placement refinements. */
@media (min-width: 901px), (min-width: 701px) and (orientation: landscape) {
  html:has(body.kat-card-detail-body),
  body.kat-card-detail-body {
    overflow: hidden;
  }

  body.kat-card-detail-body main {
    min-height: 100vh;
    overflow: hidden;
    padding: 0;
  }

  .kat-card-detail-page {
    position: relative;
  }


  .kat-card-detail-link {
    position: absolute;
    top: 14px;
    left: 24px;
    z-index: 41;
    margin: 0;
    font-size: calc(1rem + 2pt);
    text-align: left;
  }

  .kat-card-detail-grid > .kat-card-detail-ad,
  .kat-card-detail-grid > .kat-card-detail-ad:nth-child(odd),
  .kat-card-detail-grid > .kat-card-detail-ad:nth-child(even) {
    position: absolute;
    top: 29px;
    right: 126px;
    width: 272px;
    min-height: 307px;
    padding: 10px;
    margin: 0;
  }

  .kat-card-detail-ad .sponsored-card-label {
    margin-bottom: 6px;
    font-size: 0.68rem;
  }

  .kat-card-detail-ad .kat-in-feed-ad {
    min-height: 281px;
  }

  .kat-card-detail-grid > .kat-photo-detail-card,
  .kat-card-detail-grid > .kat-photo-detail-card:nth-child(odd),
  .kat-card-detail-grid > .kat-photo-detail-card:nth-child(even) {
    transform: translate(80px, -65px) scale(0.95);
  }

  .kat-card-detail-grid > .kat-fact-card--1,
  .kat-card-detail-grid > .kat-fact-card--1:nth-child(odd),
  .kat-card-detail-grid > .kat-fact-card--1:nth-child(even) {
    transform: translateY(70px);
  }

  .kat-card-detail-grid > .kat-fact-card--2,
  .kat-card-detail-grid > .kat-fact-card--2:nth-child(odd),
  .kat-card-detail-grid > .kat-fact-card--2:nth-child(even) {
    transform: translate(210px, 370px);
  }

  .kat-card-detail-grid > .kat-fact-card--3,
  .kat-card-detail-grid > .kat-fact-card--3:nth-child(odd),
  .kat-card-detail-grid > .kat-fact-card--3:nth-child(even) {
    grid-column: 1;
    grid-row: 1;
    transform: translate(50px, 285px);
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  .kat-card-detail-grid > .kat-card-detail-ad,
  .kat-card-detail-grid > .kat-card-detail-ad:nth-child(odd),
  .kat-card-detail-grid > .kat-card-detail-ad:nth-child(even) {
    justify-self: center;
    width: min(100%, 321px);
    min-height: 307px;
    padding: 10px;
    margin-top: 10px;
  }

  .kat-card-detail-ad .kat-in-feed-ad {
    min-height: 287px;
  }
}

/* Keep the third detail-page fact decorative so it cannot affect the grid placement of the Kat Card or the first two fact cards. */
@media (min-width: 901px), (min-width: 701px) and (orientation: landscape) {
  .kat-card-detail-grid > .kat-fact-card--3,
  .kat-card-detail-grid > .kat-fact-card--3:nth-child(odd),
  .kat-card-detail-grid > .kat-fact-card--3:nth-child(even) {
    position: absolute;
    left: 0;
    top: 0;
  }
}

.kat-card-detail-nav {
  position: fixed;
  top: 50%;
  z-index: 40;
  display: inline-flex;
  width: clamp(42px, 4.2vw, 64px);
  height: clamp(42px, 4.2vw, 64px);
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background: rgba(255, 248, 237, 0.42);
  color: #050505;
  box-sizing: border-box;
  padding-bottom: 10px;
  font-size: clamp(1.85rem, 3.65vw, 3.35rem);
  font-weight: 1000;
  line-height: 0.76;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(255, 248, 237, 0.58);
  cursor: pointer;
}

.kat-card-detail-nav-left {
  left: clamp(6px, 1vw, 18px);
  text-indent: -2px;
}

.kat-card-detail-nav-right {
  right: clamp(6px, 1vw, 18px);
  text-indent: 2px;
}

.kat-card-detail-nav:hover,
.kat-card-detail-nav:focus-visible {
  background: rgba(255, 248, 237, 0.78);
  outline: 4px solid rgba(255, 224, 101, 0.88);
  outline-offset: 3px;
}

.kat-card-detail-nav.is-disabled {
  color: rgba(5, 5, 5, 0.28);
  cursor: default;
  pointer-events: none;
  text-shadow: none;
}

@media (max-width: 700px) {
  .kat-card-detail-nav {
    width: 38px;
    height: 38px;
    background: rgba(255, 248, 237, 0.62);
    padding-bottom: 10px;
    font-size: 1.65rem;
    line-height: 0.76;
  }
}

.kat-card-heading{margin:0;color:inherit;-webkit-text-fill-color:inherit;-webkit-text-stroke:0;font:inherit;text-shadow:none;overflow-wrap:anywhere}

.kat-personality-match-card{position:relative;isolation:isolate;box-shadow:0 0 0 2px rgba(255,138,69,.55),0 0 24px rgba(209,77,178,.32),0 16px 38px rgba(35,10,53,.28)}
.kat-personality-match-card::before{content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,#f08a45,#ff5ebc,#7b4dff,#f08a45);background-size:240% 240%;z-index:-1;filter:blur(7px);opacity:.55;animation:kat-match-glow 8s ease-in-out infinite}
@keyframes kat-match-glow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.kat-personality-match-card::before{animation:none}.cat-of-the-day-page::before,.cat-of-the-day-page::after{animation:none!important}}
.kat-follow-menu-item{position:relative;display:block;width:100%}.kat-match-badge,.kat-menu-match-label{display:inline-flex;align-items:center;border:1px solid rgba(255,244,223,.8);border-radius:999px;background:linear-gradient(135deg,rgba(255,226,90,.92),rgba(240,138,69,.92));color:#3b2118;font-weight:900;font-size:.76rem;padding:3px 8px;margin:6px 0;box-shadow:0 4px 12px rgba(117,67,11,.18)}.kat-menu-match-label{position:absolute;right:10px;top:-21px;z-index:1;margin:0;pointer-events:none}
.kat-match-badge{cursor:pointer}.kat-personality-match-card[data-match-tooltip]:hover::after,.kat-personality-match-card[data-match-tooltip]:focus-within::after{content:attr(data-match-tooltip);position:absolute;left:min(18px,10%);top:54px;max-width:min(300px,calc(100vw - 42px));z-index:30;padding:10px 12px;border:2px solid rgba(255,244,223,.9);border-radius:16px;background:#3b2118;color:#fff4df;font-size:.85rem;font-weight:800;line-height:1.35;box-shadow:0 12px 28px rgba(0,0,0,.32);pointer-events:none}
.kat-trait-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.kat-trait-badge{display:inline-flex;border:1px solid rgba(117,67,11,.28);border-radius:999px;background:rgba(255,244,223,.78);color:#3b2118;font-weight:800;font-size:.78rem;padding:4px 9px}.kat-trait-more{display:inline-flex;gap:6px}.kat-trait-more summary{cursor:pointer;font-weight:900;font-size:inherit;color:#6d2c70;list-style:none}.kat-trait-more summary::-webkit-details-marker{display:none}.kat-trait-more[open]{display:inline-flex;flex-wrap:wrap;align-items:center;gap:7px}.kat-trait-more[open] summary{order:999;padding:0 3px}.kat-trait-collapse{display:none}.kat-trait-more[open] .kat-trait-more-label{display:none}.kat-trait-more[open] .kat-trait-collapse{display:inline-flex;align-items:center;gap:5px}.kat-trait-collapse-triangle{display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:8px solid #000}.cat-details-traits{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;border:2px solid rgba(117,67,11,.25);border-radius:18px;padding:12px;margin:12px 0;background:rgba(255,244,223,.45)}.cat-details-traits legend{font-weight:900}.cat-details-traits label{display:flex;gap:7px;align-items:center;font-weight:800}.cat-of-the-day-page::before,.cat-of-the-day-page::after{content:"🐾 ✦ 🪐 ★ •";position:fixed;top:8vh;bottom:8vh;width:80px;z-index:0;pointer-events:none;color:rgba(255,226,90,.75);font-size:1.6rem;line-height:3;writing-mode:vertical-rl;animation:cat-confetti 2.8s ease-out 1}.cat-of-the-day-page::before{left:8px}.cat-of-the-day-page::after{right:8px}.cat-of-day-hero{text-align:center;position:relative;z-index:1}.cat-of-day-hero>.kat-card{max-width:560px;margin:18px auto}.cat-of-day-date,.cat-of-day-celebrate{font-weight:900}.cat-of-day-ad{max-width:680px;margin:24px auto 0}@keyframes cat-confetti{from{transform:translateY(-60px);opacity:0}to{transform:none;opacity:1}}
.kat-trait-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.kat-trait-badge{display:inline-flex;border:1px solid rgba(117,67,11,.28);border-radius:999px;background:rgba(255,244,223,.78);color:#3b2118;font-weight:800;font-size:.78rem;padding:4px 9px}.kat-trait-more{display:inline-flex;gap:6px}.kat-trait-more summary{cursor:pointer;font-weight:900;font-size:inherit;color:#6d2c70;list-style:none}.kat-trait-more summary::-webkit-details-marker{display:none}.kat-trait-more[open]{display:inline-flex;flex-wrap:wrap;align-items:center;gap:7px}.kat-trait-more[open] summary{order:999;padding:0 3px}.kat-trait-collapse{display:none}.kat-trait-more[open] .kat-trait-more-label{display:none}.kat-trait-more[open] .kat-trait-collapse{display:inline-flex;align-items:center;gap:5px}.kat-trait-collapse-triangle{display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:8px solid #000}.cat-details-traits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(18px,5vw,48px);row-gap:14px;align-items:start;border:2px solid rgba(117,67,11,.25);border-radius:18px;padding:18px clamp(16px,4vw,30px);margin:12px 0;background:rgba(255,244,223,.45)}.cat-details-traits legend{font-weight:900}.cat-details-traits label{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;min-height:42px;margin:0;font-weight:800;line-height:1.2}.cat-details-traits input[type=checkbox]{width:16px;height:16px;margin:2px 0 0}.cat-details-traits label span{display:block;overflow-wrap:break-word}.cat-details-traits label:nth-of-type(3n+3){justify-self:end}.cat-details-traits label:nth-of-type(3n+2){justify-self:center}.cat-details-traits label:nth-of-type(3n+1){justify-self:start}@media(max-width:560px){.cat-details-traits{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}.cat-details-traits label{justify-self:start!important}}.cat-of-the-day-page::before,.cat-of-the-day-page::after{content:"🐾 ✦ 🪐 ★ •";position:fixed;top:8vh;bottom:8vh;width:80px;z-index:0;pointer-events:none;color:rgba(255,226,90,.75);font-size:1.6rem;line-height:3;writing-mode:vertical-rl;animation:cat-confetti 2.8s ease-out 1}.cat-of-the-day-page::before{left:8px}.cat-of-the-day-page::after{right:8px}.cat-of-day-hero{text-align:center;position:relative;z-index:1}.cat-of-day-hero>.kat-card{max-width:560px;margin:18px auto}.cat-of-day-date,.cat-of-day-celebrate{font-weight:900}.cat-of-day-ad{max-width:680px;margin:24px auto 0}@keyframes cat-confetti{from{transform:translateY(-60px);opacity:0}to{transform:none;opacity:1}}

.kat-card-title-stack {
  display: flex;
  min-width: 0;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.kat-card-title-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.kat-card-title-line {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kat-card-posted-date {
  display: block;
  max-width: 100%;
  font-size: 0.82em;
  line-height: 1.1;
}

.kat-card-header .kat-match-badge {
  margin: 0;
}

.kat-match-badge,
.kat-match-badge strong {
  font-weight: 1000;
}

.kat-match-badge {
  background: linear-gradient(135deg, #ffb13d, #f47a1f 58%, #d9580f);
  border-color: rgba(255, 244, 223, 0.95);
  box-shadow: 0 5px 14px rgba(117, 67, 11, 0.26);
}

.kat-match-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 22px;
  background: rgba(16, 7, 31, 0.68);
  backdrop-filter: blur(5px);
}

.kat-match-modal.is-open {
  display: flex;
}

.kat-match-modal-card {
  position: relative;
  box-sizing: border-box;
  width: min(640px, 100%);
  min-height: min(470px, calc(100vh - 44px));
  max-height: calc(100vh - 44px);
  overflow: auto;
  padding: 28px;
  border: 3px solid rgba(255, 244, 223, 0.88);
  border-radius: 28px;
  background: radial-gradient(circle at top left, #fff4a9, #f47a1f 48%, #7a2c0c);
  color: #3b2118;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.52), inset 0 0 0 2px rgba(255, 250, 188, 0.38);
}

.kat-match-modal-card h2 {
  margin: 0 40px 12px 0;
  color: inherit;
  font-size: 1.6rem;
  font-weight: 1000;
}

.kat-match-modal-copy,
.kat-match-modal-copy p,
.kat-match-modal-copy li {
  font-size: 1.25rem;
  font-weight: 850;
  line-height: 1.35;
}

.kat-match-modal-copy ul {
  margin: 8px 0 0;
  padding-left: 22px;
}

.kat-match-modal-copy a {
  color: #083d8f;
  font-weight: 1000;
}

.kat-match-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  border: 0;
  background: transparent;
  color: #3b2118;
  cursor: pointer;
  font: inherit;
  font-size: 2rem;
  font-weight: 1000;
  line-height: 1;
}

.kat-card-header > .kat-card-title-stack:first-child {
  position: relative;
  overflow: visible;
  white-space: normal;
}

.kat-card-profile-image {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  border: 2px solid #fff4df;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 244, 223, 0.7);
  box-shadow: 0 4px 10px rgba(33, 12, 2, 0.28);
  pointer-events: none;
}

.kat-match-modal-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: 28px;
  min-height: 310px;
}

.kat-match-modal-copy {
  min-width: 0;
}

.kat-match-modal-traits-row,
.kat-match-modal-traits {
  min-width: 0;
}

.kat-match-modal-profile-slot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 180px;
  min-height: 180px;
  transform: translateX(-150px);
}

.kat-match-modal-traits p:first-child {
  margin-top: 0;
}

.kat-match-modal .kat-match-modal-card img.kat-match-modal-profile-image {
  display: block;
  width: 150px !important;
  min-width: 150px;
  max-width: 150px;
  height: 150px !important;
  min-height: 150px;
  max-height: 150px;
  aspect-ratio: 1 / 1;
  margin: 0;
  border: 4px solid rgba(255, 244, 223, 0.9);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 244, 223, 0.54);
  box-shadow: 0 14px 30px rgba(59, 33, 24, 0.28);
}

@media (max-width: 520px) and (orientation: portrait) {
  .kat-match-modal-content {
    grid-template-columns: minmax(0, 1fr) 158px;
    gap: 14px;
  }

  .kat-match-modal-profile-slot {
    min-width: 158px;
    transform: none;
  }
}

/* Mobile portrait detail-page fact alignment: keep the top fact flush left and the post-photo fact flush right. */
@media (max-width: 900px) and (orientation: portrait) {
  .kat-card-detail-grid > .kat-fact-card--1,
  .kat-card-detail-grid > .kat-fact-card--1:nth-child(odd),
  .kat-card-detail-grid > .kat-fact-card--1:nth-child(even) {
    justify-self: start;
  }

  .kat-card-detail-grid > .kat-fact-card--2,
  .kat-card-detail-grid > .kat-fact-card--2:nth-child(odd),
  .kat-card-detail-grid > .kat-fact-card--2:nth-child(even) {
    justify-self: end;
  }
}

/* Center individual Kat Card detail cards between the fixed navigation arrows and keep the post-third-fact ad visible. */
@media (min-width: 901px), (min-width: 701px) and (orientation: landscape) {
  .kat-card-detail-grid > .kat-photo-detail-card,
  .kat-card-detail-grid > .kat-photo-detail-card:nth-child(odd),
  .kat-card-detail-grid > .kat-photo-detail-card:nth-child(even) {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 30;
    transform: translate(-50%, -50%) scale(0.95);
  }

  .kat-card-detail-grid > .kat-card-detail-ad,
  .kat-card-detail-grid > .kat-card-detail-ad:nth-child(odd),
  .kat-card-detail-grid > .kat-card-detail-ad:nth-child(even) {
    top: auto;
    right: clamp(82px, 8vw, 126px);
    bottom: 29px;
  }
}