.circle-page { padding: 2px 0 24px; }
    .circle-feed-page { flex: 0 0 auto; width: 100%; margin-top: 0; padding: 0 0 88px; }
    .main:has(.circle-feed-page) .composer-wrap { display: none; }
    .main:has(.circle-feed-page) .conversation { display: block; padding: 0; background: #F2F4F7; overflow-anchor: none; -webkit-overflow-scrolling: touch; }
    .circle-page-unread {
      top: 2px;
      right: 10px;
      z-index: 13;
      min-width: 22px;
      height: 22px;
      padding: 0 6px;
      border-width: 2px;
      font-size: 11px;
      cursor: pointer;
    }
    .circle-post-unread {
      top: 8px;
      right: 8px;
      z-index: 4;
      min-width: 22px;
      height: 22px;
      padding: 0 6px;
      border-width: 2px;
      font-size: 11px;
      cursor: pointer;
    }
    #meDrawer .circle-post-unread,
    #visitorMeDrawer .circle-post-unread,
    .circle-compose-preview-post .circle-post-unread { display: none !important; }
    .circle-fixed-top {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 12;
      margin: 0;
      padding: 6px 12px 9px;
      border-radius: 0;
      box-sizing: border-box;
      background: rgba(242, 244, 247, 0.96);
      box-shadow: none;
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    .circle-feed-heading { padding: 0 3px 9px; display: flex; align-items: center; gap: 10px; }
    .circle-feed-heading h2 { margin: 0; font-size: 27px; }
    .circle-feed-heading small { margin-left: auto; color: #78827d; font-size: 10px; font-weight: 700; }
    .circle-add-button {
      position: absolute;
      right: 22px;
      bottom: 22px;
      z-index: 15;
      width: 54px;
      height: 54px;
      border: 1px solid #f1f5f9;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #1a1d1b;
      background: #fff;
      box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 8px 20px rgb(0 0 0 / .06);
      font-size: 31px;
      font-weight: 350;
      cursor: pointer;
      touch-action: manipulation;
    }
    .main:has(.circle-feed-page) { position: relative; }
    .main > .circle-add-button {
      position: absolute;
      right: 22px;
      bottom: calc(22px + env(safe-area-inset-bottom, 0px));
      z-index: 30;
    }
    .main:not(:has(.circle-feed-page)) > .circle-add-button { display: none; }
    .app > .circle-add-button { display: none; }
    .circle-add-button.active { color: #fff; background: #1a1d1b; border-color: #1a1d1b; transform: rotate(45deg); }
    .app.circle-composing .main,
    .app.circle-composing .conversation,
    .app.circle-composing .topbar {
      top: 0;
      transform: none;
    }
    .app.circle-composing .main-bottom-shell {
      top: calc(var(--safe-top) + var(--topbar-gap));
      transform: none;
    }
    .app.circle-composing .conversation { overflow: hidden; }
    .circle-compose-scrim { position: absolute; inset: 0; z-index: 70; border: 0; background: rgba(20,25,22,.18); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
    .circle-compose-scrim.show { opacity: 1; pointer-events: auto; }
    .circle-compose-sheet { position: absolute; z-index: 71; left: 0; right: 0; bottom: 0; height: 90%; overflow: hidden; padding: 15px 16px 16px; border-radius: 28px 28px 0 0; display: flex; flex-direction: column; background: #F2F4F7; box-shadow: 0 -14px 40px rgba(0,0,0,.16); transform: translateY(103%); transition: transform .3s cubic-bezier(.2,.8,.2,1); isolation: isolate; scrollbar-width: none; }
    .circle-compose-sheet::-webkit-scrollbar { display: none; }
    .circle-compose-sheet.show { transform: translateY(0); }
    /* app.js measureCircleSheetRestTop(): top fixed at its keyboard-closed
       spot. With the keyboard closed this is the same box as height: 90%;
       with it open (app shrunk) the top stays put and only the bottom rises,
       so the header and text box don't jump. Applies while closing too. */
    .circle-compose-sheet.has-rest-top { top: var(--circle-sheet-top); height: auto; }
    .circle-compose-grabber { flex: 0 0 auto; width: 38px; height: 4px; margin: 0 auto 12px; border-radius: 5px; background: #d8dcda; }
    .circle-compose-head { flex: 0 0 auto; display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; margin-bottom: 12px; }
    .circle-compose-scroll { min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; padding: 0 0 12px; scrollbar-width: none; }
    .circle-compose-scroll::-webkit-scrollbar { display: none; }
    .circle-compose-head strong { text-align: center; font-size: 15px; }
    .circle-compose-head button { min-height: 36px; border: 0; border-radius: 13px; background: transparent; font-size: 12px; font-weight: 750; cursor: pointer; }
    .circle-compose-head .publish { color: #fff; background: #1a1d1b; }
    .circle-compose-head .publish:disabled { opacity: .55; cursor: wait; }
    .circle-private-post.circle-compose-preview-post { overflow: visible; margin: 0 0 16px; min-width: 0; box-sizing: border-box; }
    .circle-compose-preview-post .circle-reaction-bar { padding: 2px; background: #F4F4F5; }
    .circle-compose-preview-post .circle-private-actions button { color: #5c6560; background: transparent; }
    .circle-compose-preview-post .circle-private-actions button:not(.active) { opacity: .35; }
    .circle-compose-preview-post .circle-private-actions button.active { opacity: 1; color: #5c6560; background: transparent; }
    .circle-compose-preview-post .circle-private-actions .circle-bomb { color: inherit; background: transparent; }
    .circle-compose-input-wrap { position: relative; }
    .circle-compose-input-wrap textarea { width: 100%; min-height: 44px; overflow: hidden; padding: 0 0 18px; border: 0; outline: 0; resize: none; background: transparent; color: #1f2924; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
    .circle-character-count { position: absolute; right: 0; bottom: 4px; color: #8b938e; font-size: 10px; }
    .circle-compose-category { padding: 5px 10px; border: 0; border-radius: 999px; color: #5c6560; background: #f4f5f7; font-size: 11px; font-weight: 700; text-transform: none; cursor: pointer; }
    .circle-compose-category.has-tag { padding: 0; border-radius: 0; display: flex; align-items: center; gap: 7px; color: #27312c; background: transparent; text-align: left; text-transform: none; }
    .circle-compose-category.tag-pill {
      padding: 4px 10px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
      text-transform: none;
    }
    .circle-tag-picker { position: absolute; z-index: 22; top: 39px; left: 54px; right: 0; width: auto; max-height: 230px; overflow-y: auto; padding: 11px; border: 1px solid #e4e8e5; border-radius: 17px; display: none; background: #fff; box-shadow: 0 12px 30px rgba(27,51,41,.15); }
    .circle-tag-picker.show { display: block; animation: rise .16s ease both; }
    .circle-tag-picker small { display: block; margin: 0 3px 8px; color: #8b928e; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .45px; }
    .circle-tag-close { position: absolute; z-index: 2; top: 17px; right: 17px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: #58615d; background: #f0f3f1; font-size: 16px; line-height: 1; cursor: pointer; }
    .circle-tag-close:hover { background: #F4F4F5; }
    .circle-custom-tag-input { width: 100%; margin: 0 0 10px; padding: 9px 42px 9px 11px; border: 1px solid #e1e6e2; border-radius: 12px; outline: 0; color: #27312c; background: #F4F4F5; font-size: 11px; }
    .circle-custom-tag-input:focus { border-color: #c5c9ce; background: #fff; box-shadow: 0 0 0 3px rgba(26,29,27,.06); }
    .circle-icon-suggestions { display: none; margin: -2px 0 10px; padding: 7px; border-radius: 13px; align-items: center; gap: 7px; background: #F4F4F5; }
    .circle-icon-suggestions.show { display: flex; }
    .circle-icon-suggestions small { margin: 0 auto 0 2px; color: #8b928e; font-size: 8px; }
    .circle-icon-choice { width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 10px; display: grid; place-items: center; background: #fff; font-size: 20px; cursor: pointer; }
    .circle-icon-choice.active { border-color: #1a1d1b; background: #f4f5f7; }
    .circle-tag-options { display: flex; flex-wrap: wrap; gap: 6px; }
    .circle-tag-option { padding: 4px 10px; border: 0; border-radius: 12px; display: inline-flex; align-items: center; gap: 4px; color: #59635e; background: #f1f3f1; font-size: 12px; font-weight: 600; cursor: pointer; }
    .circle-tag-option.active { box-shadow: 0 0 0 2px currentColor; }
    .circle-attachment-preview {
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: 280px;
      margin: 0 0 10px;
      border-radius: 16px;
      overflow: hidden;
      box-sizing: border-box;
      color: #3f4843;
      background: #eef0f3;
    }
    .circle-attachment-preview.show { display: block; }
    .circle-attachment-preview.show:not(.is-photos) {
      display: grid;
      height: 84px;
      place-items: center;
      align-content: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 750;
    }
    .circle-attachment-preview.show.is-photos,
    .circle-attachment-preview:not(.show) { height: 280px; background: transparent; overflow: hidden; }
    .circle-photo-stage {
      position: relative;
      display: block;
      width: 100%;
      height: 280px;
      margin: 0 0 10px;
    }
    .circle-photo-stage:has(.circle-attachment-preview.show:not(.is-photos)) {
      height: auto;
    }
    .circle-photo-stage:has(.circle-attachment-preview.show:not(.is-photos)) .circle-photo-modes { display: none; }
    .circle-photo-modes {
      position: absolute;
      left: -44px;
      top: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 36px;
      /* Fixed size and place whatever the mode: the photo area can grow
         (square 4 / 9 / Free style previews), the buttons don't. */
      height: auto;
    }
    .circle-compose-preview-post.layout-right .circle-photo-modes {
      left: auto;
      right: -44px;
    }
    .circle-photo-modes button {
      /* The height they had in the default 280px photo area: (280 - 4 * 4px gaps) / 5. */
      flex: none;
      height: 52px;
      min-height: 0;
      padding: 8px 1px;
      border: 1px solid #e8ebe9;
      border-radius: 10px;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 2px;
      color: #5c6560;
      background: #f4f5f7;
      cursor: pointer;
      font-size: 7px;
      font-weight: 750;
      line-height: 1.05;
      text-align: center;
    }
    .circle-photo-modes button.is-on { color: #fff; background: #1a1d1b; border-color: #1a1d1b; }
    .circle-photo-modes .pcm-ico {
      width: 14px;
      height: 14px;
      display: grid;
      gap: 1px;
      pointer-events: none;
    }
    .circle-photo-modes .pcm-1 { grid-template: 1fr / 1fr; }
    .circle-photo-modes .pcm-4 { grid-template: 1fr 1fr / 1fr 1fr; }
    .circle-photo-modes .pcm-9 { grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr; }
    .circle-photo-modes .pcm-ico i { display: block; border: 1px solid currentColor; border-radius: 1px; opacity: .85; }
    .circle-photo-mode-icon {
      width: 15px;
      height: 15px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }
    .circle-photo-linear-icon { width: 18px; }
    .circle-photo-canvas.is-magic .circle-photo-grid {
      animation: circle-photo-magic-in .42s ease;
    }
    @keyframes circle-photo-magic-in {
      from { opacity: .35; transform: scale(.96); }
      to { opacity: 1; transform: none; }
    }
    .circle-photo-stage .circle-attachment-preview { margin: 0; height: 100%; }
    .circle-attachment-preview.is-photos .circle-media-carousel,
    .circle-attachment-preview.is-photos .circle-photo-pager,
    .circle-attachment-preview.is-photos .circle-photo-canvas { margin: 0; height: 100%; box-shadow: none; }
    .circle-attachment-preview .circle-photo-cell-cue span { font-size: inherit; }
    .circle-photo-carousel-empty {
      width: 100%;
      height: 100%;
      padding: 0;
      border: 2px dashed #d8dcda;
      border-radius: 16px;
      display: grid;
      place-items: center;
      color: #94a3b8;
      background: #f4f5f7;
      cursor: pointer;
    }
    .circle-photo-carousel-add {
      flex: 0 0 72px;
      height: 280px;
      padding: 0;
      border: 2px dashed #d8dcda;
      border-radius: 16px;
      color: #94a3b8;
      background: #f4f5f7;
      font-size: 22px;
      cursor: pointer;
    }
    .circle-photo-pager {
      position: relative;
      width: 100%;
      height: 280px;
      margin: 0 0 10px;
      overflow: hidden;
      border-radius: 16px;
    }
    .circle-photo-pager-scroller {
      display: flex;
      width: 100%;
      height: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .circle-photo-pager-scroller::-webkit-scrollbar { display: none; }
    .circle-photo-pager-slide {
      position: relative;
      flex: 0 0 100%;
      width: 100%;
      height: 100%;
      scroll-snap-align: start;
      background: #f4f5f7;
      cursor: zoom-in;
      touch-action: manipulation;
    }
    .circle-photo-pager-slide img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      pointer-events: none;
    }
    /* Published one-photo-per-page posts (app.js circlePhotoPagerMarkup
       whole): every photo shown whole on the slide's light background; the
       frame takes the first photo's shape when it is known. */
    .circle-photo-pager.is-whole .circle-photo-pager-slide img { object-fit: contain; }
    .circle-photo-pager.is-whole.has-ratio { height: auto; aspect-ratio: var(--pager-ratio); }
    /* Single plain photo: the box is the photo. It fits inside the card
       width and --single-max-h (whichever limit is hit first), left-aligned,
       no crop, no grey, nothing to scroll. */
    .circle-photo-pager.is-single {
      --single-max-h: 280px; /* same height as the multi-photo carousel */
      width: min(100%, calc(var(--single-max-h) * var(--pager-ratio, 1)));
      height: auto;
      aspect-ratio: var(--pager-ratio, 1);
    }
    .circle-photo-pager.is-single .circle-photo-pager-slide { background: transparent; }
    .circle-photo-pager.is-single .circle-photo-pager-slide img { object-fit: contain; }
    .circle-photo-four-up-pager .circle-photo-canvas {
      height: 100%;
      border-radius: 0;
      box-shadow: none;
    }
    .circle-photo-pager-add {
      width: 100%;
      height: 100%;
      padding: 0;
      border: 2px dashed #d8dcda;
      border-radius: 16px;
      display: grid;
      place-items: center;
      color: #94a3b8;
      background: #f4f5f7;
      cursor: pointer;
    }
    /* Dots sit on the photo, so they get their own dark pill: visible on dark and light photos alike. */
    .circle-photo-pager-dots {
      position: absolute;
      left: 50%;
      bottom: 8px;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
      width: max-content;
      padding: 3px 6px;
      border-radius: 99px;
      background: rgba(0, 0, 0, .32);
      transform: translateX(-50%);
      pointer-events: none;
    }
    .circle-photo-pager-dots button {
      width: 5px;
      height: 5px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, .5);
      pointer-events: auto;
      cursor: pointer;
    }
    .circle-photo-pager-dots button.is-hint {
      background: transparent;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
    }
    .circle-photo-pager-dots button.is-on {
      width: 10px;
      border-radius: 99px;
      background: #fff;
      box-shadow: none;
    }
    @media (hover: hover) and (pointer: fine) {
      .circle-photo-pager.has-fine-pointer .circle-photo-pager-nav {
        position: absolute;
        top: 50%;
        z-index: 3;
        width: 34px;
        height: 34px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #1f232b;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 2px 10px rgba(20, 25, 31, 0.18);
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%);
        transition: opacity 0.15s ease;
      }
      .circle-photo-pager.has-fine-pointer:hover .circle-photo-pager-nav,
      .circle-photo-pager.has-fine-pointer:focus-within .circle-photo-pager-nav {
        opacity: 1;
        pointer-events: auto;
      }
      .circle-photo-pager.has-fine-pointer .circle-photo-pager-prev { left: 10px; }
      .circle-photo-pager.has-fine-pointer .circle-photo-pager-next { right: 10px; }
      .circle-photo-pager.has-fine-pointer .circle-photo-pager-nav span {
        font-size: 22px;
        line-height: 1;
        font-weight: 700;
      }
    }
    .circle-attachment-preview.is-photos .circle-photo-pager {
      margin: 0;
      height: 100%;
    }
    .circle-attachment-preview.show.is-photos.is-design-linear {
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: none;
      scrollbar-width: none;
    }
    .circle-attachment-preview.is-design-linear::-webkit-scrollbar { display: none; }
    .circle-attachment-preview.is-design-linear .circle-photo-canvas {
      width: calc(var(--pc-sections, 3) * 100%);
      min-width: calc(var(--pc-sections, 3) * 100%);
      height: 100%;
      touch-action: pan-x;
    }
    .circle-attachment-preview.is-design-solo .circle-photo-canvas {
      width: 100%;
      min-width: 100%;
    }
    .circle-attachment-preview.is-design-pages {
      position: relative;
      overflow: hidden;
    }
    .circle-attachment-preview.is-design-pages > .circle-photo-pager-dots {
      bottom: 8px;
    }
    .circle-design-pages { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .circle-design-pages::-webkit-scrollbar { display: none; }
    .circle-design-page { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; }
    .circle-design-page .circle-photo-canvas { width: 100%; min-width: 100%; height: 100%; }
    .circle-photo-linear-feed {
      width: 100%;
      height: 280px;
      margin: 0 0 10px;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
    }
    .circle-photo-linear-feed::-webkit-scrollbar { display: none; }
    .circle-photo-linear-track {
      width: calc(var(--pc-sections, 3) * 100%);
      height: 100%;
    }
    .circle-photo-linear-track .circle-photo-canvas,
    .circle-photo-linear-feed .circle-photo-canvas {
      width: 100%;
      height: 100%;
      margin: 0;
    }
    .circle-private-post > .circle-photo-canvas,
    .circle-private-post > .circle-media-carousel { margin: 0 0 10px; }
    .circle-photo-canvas {
      --pc-n: 3;
      /* No outer white frame: photos reach the edges (gaps stay). */
      --pc-pad: 0px;
      --pc-gap: 6px;
      --pc-cell-w: calc((100% - (2 * var(--pc-pad)) - ((var(--pc-n) - 1) * var(--pc-gap))) / var(--pc-n));
      --pc-cell-h: calc((100% - (2 * var(--pc-pad)) - ((var(--pc-n) - 1) * var(--pc-gap))) / var(--pc-n));
      --pc-x1: var(--pc-pad);
      --pc-y1: var(--pc-pad);
      --pc-x2: calc(var(--pc-pad) + var(--pc-cell-w) + var(--pc-gap));
      --pc-y2: calc(var(--pc-pad) + var(--pc-cell-h) + var(--pc-gap));
      --pc-x3: calc(var(--pc-pad) + (2 * (var(--pc-cell-w) + var(--pc-gap))));
      --pc-y3: calc(var(--pc-pad) + (2 * (var(--pc-cell-h) + var(--pc-gap))));
      --pc-span-2w: calc((2 * var(--pc-cell-w)) + var(--pc-gap));
      --pc-span-2h: calc((2 * var(--pc-cell-h)) + var(--pc-gap));
      --pc-span-3w: calc((3 * var(--pc-cell-w)) + (2 * var(--pc-gap)));
      --pc-span-3h: calc((3 * var(--pc-cell-h)) + (2 * var(--pc-gap)));
      position: relative;
      width: 100%;
      height: 280px;
      border-radius: 16px;
      overflow: hidden;
      background: #fff;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }
    .circle-photo-canvas.is-static { touch-action: pan-y; }
    /* Published feed posts: native scrolling both ways on the photo rows,
       so iOS picks the direction at the start of a swipe (sideways moves the
       photos, up/down scrolls the feed). Descendants too, since touch-action
       combines with ancestors and the static canvas above is pan-y only.
       The composer preview keeps its own gestures. */
    .circle-private-feed .circle-private-post:not(.circle-compose-preview-post) :is(.circle-photo-pager-scroller, .circle-media-carousel, .circle-photo-linear-feed, .circle-design-pages),
    .circle-private-feed .circle-private-post:not(.circle-compose-preview-post) :is(.circle-photo-pager-scroller, .circle-media-carousel, .circle-photo-linear-feed, .circle-design-pages) * {
      touch-action: pan-x pan-y;
    }
    .circle-photo-layout-notice {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 6;
      max-width: calc(100% - 32px);
      padding: 9px 14px;
      border-radius: 999px;
      color: #fff;
      background: rgba(26,29,27,.88);
      box-shadow: 0 8px 20px rgba(0,0,0,.16);
      font-size: 11px;
      font-weight: 750;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -44%);
      transition: opacity .18s ease, transform .18s ease;
      white-space: nowrap;
    }
    .circle-photo-layout-notice.show { opacity: 1; transform: translate(-50%, -50%); }
    .circle-photo-grid {
      display: grid;
      grid-template-columns: repeat(var(--pc-cols, var(--pc-n)), minmax(0, 1fr));
      grid-template-rows: repeat(var(--pc-rows, var(--pc-n)), minmax(0, 1fr));
      gap: var(--pc-gap);
      padding: var(--pc-pad);
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
    .circle-photo-cell {
      min-width: 0;
      min-height: 0;
      align-self: stretch;
      justify-self: stretch;
      box-sizing: border-box;
      border: 2px dashed #d8dcda;
      border-radius: 14px;
      display: grid;
      place-items: center;
      overflow: hidden;
      position: relative;
      color: #94a3b8;
      background: #f4f5f7;
      cursor: pointer;
    }
    .circle-photo-cell.is-on { color: #1a1d1b; background: #eef0f3; border-color: #1a1d1b; }
    .circle-photo-cell.is-swap { box-shadow: inset 0 0 0 2px #1a1d1b; }
    .circle-photo-cell.is-filled {
      border: 0;
      color: #fff;
      background-color: #eef0f3;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
      cursor: grab;
    }
    .circle-photo-cell-unmerge {
      position: absolute;
      top: 6px;
      right: 6px;
      z-index: 3;
      width: 22px;
      height: 22px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      background: rgba(26,29,27,.72);
      cursor: pointer;
      font-size: 12px;
      line-height: 1;
    }
    .circle-photo-canvas.is-static .circle-photo-cell { cursor: default; }
    .circle-photo-canvas.is-static .circle-photo-cell.is-filled { cursor: zoom-in; }
    .circle-photo-canvas.is-static .circle-photo-cell:not(.is-filled) {
      border-color: transparent;
      background: transparent;
    }
    .circle-photo-cell.is-filled.is-grabbing { cursor: grabbing; }
    /* Pinned to the cell's edges so the photo's own size never takes part
       in the cell's layout (on iOS Safari it could leave a grey band above
       wide photos in tall cells); pan/zoom still come from object-position
       and the scale transform. */
    .circle-photo-cell img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; display: block; }
    .circle-photo-cell-cue {
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 3px;
      pointer-events: none;
      font-size: 16px;
      font-weight: 650;
      line-height: 1;
    }
    .circle-photo-cell-cue.is-add { font-size: 8px; font-weight: 700; letter-spacing: 0; }
    .circle-photo-cell-cue svg { width: 14px; height: 14px; }
    .circle-photo-cell-remove {
      position: absolute;
      top: 6px;
      right: 6px;
      z-index: 2;
      width: 22px;
      height: 22px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      background: rgba(0,0,0,.4);
      cursor: pointer;
      font-size: 11px;
      line-height: 1;
    }
    .circle-photo-tutorial { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: 16px; }
    .circle-photo-tutorial.is-off { display: none; }
    .circle-photo-ghost-box {
      position: absolute;
      border: 2px dashed #1a1d1b;
      border-radius: 14px;
      background: rgba(26,29,27,.1);
      opacity: 0;
      animation: circlePhotoBox 12s cubic-bezier(.4,0,.2,1) infinite;
    }
    .circle-photo-ghost-result {
      position: absolute;
      z-index: 4;
      border: 2px dashed #d8dcda;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      color: #94a3b8;
      background: #f4f5f7;
      font-size: 8px;
      font-weight: 700;
      line-height: 1;
      opacity: 0;
      animation: circlePhotoResult1 12s cubic-bezier(.4,0,.2,1) infinite;
    }
    .circle-photo-ghost-result svg { width: 14px; height: 14px; }
    .circle-photo-ghost-result span { font-size: 8px; font-weight: 700; line-height: 1; }
    .circle-photo-ghost-hand {
      position: absolute;
      z-index: 5;
      font-size: 22px;
      line-height: 1;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,.2));
      animation: circlePhotoHand 12s cubic-bezier(.4,0,.2,1) infinite;
    }
    /* Demo: three drags build one layout (2x2 block, tall right block, wide
       bottom block). Each merged block stays; the finished layout holds, then
       everything fades out together and it loops. */
    @keyframes circlePhotoHand {
      0%, 2% { left: calc(var(--pc-x1) + (var(--pc-cell-w) / 2)); top: calc(var(--pc-y1) + (var(--pc-cell-h) / 2)); transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
      4% { left: calc(var(--pc-x1) + (var(--pc-cell-w) / 2)); top: calc(var(--pc-y1) + (var(--pc-cell-h) / 2)); transform: translate(-50%, -50%) scale(.9); opacity: 1; }
      14% { left: calc(var(--pc-x2) + (var(--pc-cell-w) / 2)); top: calc(var(--pc-y2) + (var(--pc-cell-h) / 2)); transform: translate(-50%, -50%) scale(.9); opacity: 1; }
      17%, 25% { left: calc(var(--pc-x2) + (var(--pc-cell-w) / 2)); top: calc(var(--pc-y2) + (var(--pc-cell-h) / 2)); transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
      26% { left: calc(var(--pc-x3) + (var(--pc-cell-w) / 2)); top: calc(var(--pc-y1) + (var(--pc-cell-h) / 2)); transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
      28% { left: calc(var(--pc-x3) + (var(--pc-cell-w) / 2)); top: calc(var(--pc-y1) + (var(--pc-cell-h) / 2)); transform: translate(-50%, -50%) scale(.9); opacity: 1; }
      38% { left: calc(var(--pc-x3) + (var(--pc-cell-w) / 2)); top: calc(var(--pc-y2) + (var(--pc-cell-h) / 2)); transform: translate(-50%, -50%) scale(.9); opacity: 1; }
      41%, 49% { left: calc(var(--pc-x3) + (var(--pc-cell-w) / 2)); top: calc(var(--pc-y2) + (var(--pc-cell-h) / 2)); transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
      50% { left: calc(var(--pc-x1) + (var(--pc-cell-w) / 2)); top: calc(var(--pc-y3) + (var(--pc-cell-h) / 2)); transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
      52% { left: calc(var(--pc-x1) + (var(--pc-cell-w) / 2)); top: calc(var(--pc-y3) + (var(--pc-cell-h) / 2)); transform: translate(-50%, -50%) scale(.9); opacity: 1; }
      62% { left: calc(var(--pc-x3) + (var(--pc-cell-w) / 2)); top: calc(var(--pc-y3) + (var(--pc-cell-h) / 2)); transform: translate(-50%, -50%) scale(.9); opacity: 1; }
      65%, 100% { left: calc(var(--pc-x3) + (var(--pc-cell-w) / 2)); top: calc(var(--pc-y3) + (var(--pc-cell-h) / 2)); transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
    }
    @keyframes circlePhotoBox {
      0%, 3% { width: var(--pc-cell-w); height: var(--pc-cell-h); left: var(--pc-x1); top: var(--pc-y1); opacity: 0; }
      4% { width: var(--pc-cell-w); height: var(--pc-cell-h); left: var(--pc-x1); top: var(--pc-y1); opacity: 1; }
      14% { width: var(--pc-span-2w); height: var(--pc-span-2h); left: var(--pc-x1); top: var(--pc-y1); opacity: 1; }
      16%, 26.99% { width: var(--pc-span-2w); height: var(--pc-span-2h); left: var(--pc-x1); top: var(--pc-y1); opacity: 0; }
      27% { width: var(--pc-cell-w); height: var(--pc-cell-h); left: var(--pc-x3); top: var(--pc-y1); opacity: 0; }
      28% { width: var(--pc-cell-w); height: var(--pc-cell-h); left: var(--pc-x3); top: var(--pc-y1); opacity: 1; }
      38% { width: var(--pc-cell-w); height: var(--pc-span-2h); left: var(--pc-x3); top: var(--pc-y1); opacity: 1; }
      40%, 50.99% { width: var(--pc-cell-w); height: var(--pc-span-2h); left: var(--pc-x3); top: var(--pc-y1); opacity: 0; }
      51% { width: var(--pc-cell-w); height: var(--pc-cell-h); left: var(--pc-x1); top: var(--pc-y3); opacity: 0; }
      52% { width: var(--pc-cell-w); height: var(--pc-cell-h); left: var(--pc-x1); top: var(--pc-y3); opacity: 1; }
      62% { width: var(--pc-span-3w); height: var(--pc-cell-h); left: var(--pc-x1); top: var(--pc-y3); opacity: 1; }
      64%, 100% { width: var(--pc-span-3w); height: var(--pc-cell-h); left: var(--pc-x1); top: var(--pc-y3); opacity: 0; }
    }
    /* Each block appears where its drag ended and stays until the end. */
    @keyframes circlePhotoResult1 { 0%, 14.9% { opacity: 0; } 16%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
    @keyframes circlePhotoResult2 { 0%, 38.9% { opacity: 0; } 40%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
    @keyframes circlePhotoResult3 { 0%, 62.9% { opacity: 0; } 64%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
    .circle-photo-ghost-result.is-1 { left: var(--pc-x1); top: var(--pc-y1); width: var(--pc-span-2w); height: var(--pc-span-2h); animation-name: circlePhotoResult1; }
    .circle-photo-ghost-result.is-2 { left: var(--pc-x3); top: var(--pc-y1); width: var(--pc-cell-w); height: var(--pc-span-2h); animation-name: circlePhotoResult2; }
    .circle-photo-ghost-result.is-3 { left: var(--pc-x1); top: var(--pc-y3); width: var(--pc-span-3w); height: var(--pc-cell-h); animation-name: circlePhotoResult3; }
    .circle-attachment-preview img:not(.circle-media-item),
    .circle-attachment-preview video:not(.circle-media-item),
    .circle-compose-preview-post img:not(.circle-media-item),
    .circle-compose-preview-post video:not(.circle-media-item) { max-width: 100%; box-sizing: border-box; }
    .circle-compose-preview-post .cblock,
    .circle-attachment-preview .cblock { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
    .circle-attachment-preview span { font-size: 34px; }
    .circle-attachment-preview .circle-photo-ghost-result span,
    .circle-attachment-preview .circle-photo-cell-cue,
    .circle-attachment-preview .circle-photo-cell-cue span { font-size: 8px; }
    .circle-attachment-preview .circle-photo-cell-cue:not(.is-add) { font-size: 16px; }
    .circle-photo-gallery {
      width: 100%;
      margin: 0 0 8px;
      overflow: hidden;
    }
    .circle-compose-preview-post #circlePhotoGallery,
    .circle-compose-preview-post .circle-photo-stage {
      width: 100%;
      max-width: 100%;
    }
    #circlePhotoGallery {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      position: relative;
      width: 100%;
      height: 93px;
      overflow: hidden;
      border: 0;
      border-radius: 16px;
      background: #f4f5f7;
      color: #94a3b8;
      box-sizing: border-box;
    }
    #circlePhotoGallery::-webkit-scrollbar { display: none; }
    #circlePhotoGallery[hidden] { display: none; }
    .circle-photo-gallery[hidden] { display: none; }
    .circle-photo-gallery-track {
      display: flex;
      align-items: stretch;
      gap: 6px;
      width: 100%;
      overflow-x: auto;
      padding: 0;
      scrollbar-width: none;
    }
    #circlePhotoGallery .circle-photo-gallery-track {
      flex: 1;
      width: auto;
      min-width: 0;
      height: 100%;
      padding: 0;
      overflow-x: auto;
      overflow-y: hidden;
      align-items: flex-end;
      box-sizing: border-box;
    }
    .circle-photo-gallery-track::-webkit-scrollbar { display: none; }
    .circle-photo-gallery-thumb {
      position: relative;
      flex: 0 0 auto;
      padding: 0;
      border: 0;
      border-radius: 8px;
      overflow: hidden;
      background: #f4f5f7;
      cursor: pointer;
      box-sizing: border-box;
    }
    #circlePhotoGallery .circle-photo-gallery-thumb {
      width: auto;
      height: auto;
      align-self: flex-end;
    }
    .circle-photo-gallery-thumb.is-dragging { opacity: .55; }
    #circlePhotoGallery .circle-photo-gallery-thumb img {
      width: auto;
      height: auto;
      max-width: none;
      max-height: none;
      object-fit: contain;
      pointer-events: none;
    }
    .circle-photo-gallery-remove {
      position: absolute;
      top: 2px;
      right: 2px;
      z-index: 1;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      background: rgba(26, 29, 27, .72);
      font-size: 8px;
      line-height: 1;
    }
    #circlePhotoGallery .circle-photo-gallery-add {
      flex: 0 0 93px;
      width: 93px;
      height: 93px;
      padding: 0;
      border: 0;
      border-radius: 14px;
      align-self: flex-end;
      display: grid;
      place-items: center;
      color: #94a3b8;
      background: #f4f5f7;
      font-size: 36px;
      font-weight: 350;
      line-height: 1;
      cursor: pointer;
    }
    #circlePhotoGallery .circle-photo-gallery-wipe {
      position: relative;
      flex: 0 0 22px;
      width: 22px;
      height: 22px;
      margin: 6px 6px 0 4px;
      align-self: flex-start;
      z-index: 4;
      padding: 0;
      border: 0;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      background: rgba(26, 29, 27, .72);
      font-size: 11px;
      line-height: 1;
      cursor: pointer;
    }
    .circle-photo-gallery.is-feed {
      margin: 8px 0 10px;
      height: auto;
    }
    .circle-photo-gallery.is-feed .circle-photo-gallery-track {
      align-items: flex-end;
    }
    .circle-private-post > .circle-photo-gallery.is-feed {
      width: 100%;
    }
    .circle-photo-add {
      display: none;
      gap: 4px;
      width: 100%;
      margin: 0 0 8px;
    }
    .circle-photo-add-btn {
      flex: 1;
      min-width: 0;
      min-height: 44px;
      padding: 6px 2px;
      border: 1px solid #e8ebe9;
      border-radius: 10px;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 2px;
      color: #5c6560;
      background: #f4f5f7;
      cursor: pointer;
      font-size: 7px;
      font-weight: 750;
      line-height: 1.05;
      text-align: center;
    }
    .circle-photo-add-btn span { font-size: 14px; line-height: 1; }
    .circle-photo-add-btn.active { color: #fff; background: #1a1d1b; border-color: #1a1d1b; }
    .circle-attachment { flex: 1; min-height: 64px; padding: 10px 6px; border: 1px solid #f1f5f9; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #3f4843; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .05); font-size: 11px; font-weight: 750; cursor: pointer; }
    .circle-attachment span { font-size: 22px; }
    .circle-attachment.active { color: #1a1d1b; background: #f4f5f7; border-color: #1a1d1b; }
    .circle-dynamic-filters { margin: 0; padding: 0; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 2px; }
    .circle-filter-scroll { min-width: 0; overflow-x: auto; display: flex; gap: 2px; scrollbar-width: none; }
    .circle-filter-scroll::-webkit-scrollbar { display: none; }
    .circle-filter {
      position: relative;
      flex: 0 0 auto;
      min-height: 34px;
      padding: 0 10px;
      border: 0;
      border-radius: 0;
      color: #8f9491;
      background: transparent;
      font: inherit;
      font-size: 12px;
      font-weight: 750;
      letter-spacing: -.15px;
      white-space: nowrap;
      cursor: pointer;
    }
    .circle-filter::after {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 0;
      height: 3px;
      border-radius: 999px;
      background: transparent;
    }
    .circle-filter.active { color: #202226; background: transparent; }
    .circle-filter.active::after { background: #202226; }
    .circle-filter:focus-visible { outline: 2px solid rgba(32,34,38,.22); outline-offset: -2px; border-radius: 8px; }
    .circle-private-feed { width: 100%; display: grid; gap: 12px; padding: 8px 12px 12px; background: transparent; box-sizing: border-box; overflow-anchor: none; }
    .circle-private-post { position: relative; overflow: hidden; overflow-anchor: none; min-width: 0; padding: 14px 14px 12px 58px; border: 1px solid #f1f5f9; border-radius: 21px; background: #fff; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); box-sizing: border-box; }
    .circle-private-post.is-pending-upload::after {
      content: "Uploading photos…";
      position: absolute;
      top: 10px;
      right: 12px;
      z-index: 2;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(15, 23, 42, .72);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .01em;
      pointer-events: none;
    }
    .circle-private-head { min-height: 22px; padding: 0 0 6px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; }
    .circle-private-avatar { position: absolute; left: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--circle-avatar,#4b7966); font-size: 17px; font-weight: 800; overflow: hidden; background-size: cover; background-position: center; }
    .circle-repost-avatars {
      position: absolute;
      left: 14px;
      top: 14px;
      width: 36px;
      height: auto;
      display: flex;
      flex-direction: column-reverse;
      justify-content: flex-start;
      gap: 6px;
    }
    .circle-repost-avatars .circle-private-avatar {
      position: relative;
      left: auto;
      top: auto;
      flex: 0 0 36px;
    }
    .circle-repost-avatars .circle-repost-original {
      top: auto;
      z-index: 1;
      box-shadow: none;
      flex: 0 0 29px;
      width: 29px;
      height: 29px;
      align-self: center;
      font-size: 14px;
    }
    .circle-repost-avatars .circle-repost-front { z-index: 2; }
    .circle-private-post.layout-right .circle-repost-avatars { left: auto; right: 14px; }
    .circle-private-post.is-repost { padding-left: 58px; }
    .circle-private-post.is-repost.layout-right { padding-left: 14px; padding-right: 58px; }
    .circle-private-head strong, .circle-private-head small { display: block; }
    .circle-private-head > span:nth-child(2), .circle-compose-preview-post .circle-private-head > span:nth-child(3) { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
    .circle-private-head strong { font-size: 15px; line-height: 1.15; letter-spacing: -.2px; }
    .circle-private-head small { display: none; }
    .circle-category { padding: 4px 8px; border-radius: 999px; color: #3F3F46; background: #F4F4F5; font-size: 8px; font-weight: 850; text-transform: uppercase; }
    .circle-category:empty { display: none; }
    .circle-category.category-pill {
      padding: 4px 10px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
      text-transform: none;
    }
    .circle-category.tag-identity,
    .circle-compose-category.has-tag {
      position: static;
      max-width: 46%;
      padding: 0;
      border-radius: 0;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      color: #27312c;
      background: transparent;
      text-align: left;
      text-transform: none;
    }
    .circle-tag-avatar { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #F4F4F5; font-size: 15px; }
    .circle-tag-copy { min-width: 0; max-width: 72px; padding: 0; display: block; line-height: 1.15; text-align: right; }
    .circle-private-head .circle-tag-copy strong,
    .circle-tag-copy strong {
      display: block;
      overflow: hidden;
      color: #27312c;
      font-size: 12px;
      font-weight: 750;
      letter-spacing: 0;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .circle-tag-copy small { margin-top: 2px; overflow: hidden; color: #89918d; font-size: 8px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
    .circle-private-copy { width: 100%; max-width: none; margin: 0 0 10px; padding: 0; color: #1f2924; font-size: 15px; line-height: 1.45; letter-spacing: -.1px; white-space: pre-wrap; overflow-wrap: anywhere; }
    .circle-private-media { height: 84px; margin: 0 0 10px; border-radius: 16px; display: grid; place-items: center; background: var(--circle-media,#F4F4F5); font-size: 36px; }
    .circle-media-carousel,
    .circle-photo-linear-feed {
      cursor: zoom-in;
      touch-action: manipulation;
    }
    .circle-media-carousel {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: 280px;
      margin: 0 0 10px;
      overflow-x: auto;
      overflow-y: hidden;
      box-sizing: border-box;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
    }
    .circle-media-carousel::-webkit-scrollbar { display: none; }
    .circle-media-track {
      display: flex;
      align-items: stretch;
      gap: 8px;
      width: max-content;
      height: 280px;
    }

    /* New post as a page (like New meetup) on a phone: ‹ · New post on white, photos, then the
       text, one card of settings, and a big Share at the bottom. Brain notes keep the sheet. */
    .circle-compose-back svg { display: none; }
    html:not(.is-desktop-board) .circle-compose-sheet.is-post-page,
    html:not(.is-desktop-board) .circle-compose-sheet.is-post-page.has-rest-top {
      top: 0;
      height: auto;
      padding: 0;
      border-radius: 0;
      background: #f4f5f7;
      box-shadow: none;
    }
    html:not(.is-desktop-board) .circle-compose-sheet.is-post-page::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      height: calc(env(safe-area-inset-bottom, 0px) + 80px);
      background: #fff;
      border-top: 1px solid #ececea;
      pointer-events: none;
    }
    .is-post-page .circle-compose-grabber { display: none; }
    html:not(.is-desktop-board) .is-post-page .circle-compose-head {
      margin: 0;
      padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px 10px;
      grid-template-columns: 56px 1fr 56px;
      background: #fff;
      border-bottom: 1px solid #ececea;
    }
    html:not(.is-desktop-board) .is-post-page .circle-compose-head strong { font-size: 17px; font-weight: 600; }
    html:not(.is-desktop-board) .is-post-page .circle-compose-back {
      width: 40px;
      height: 40px;
      min-height: 0;
      padding: 0;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #f2f2f0;
      color: #20211f;
    }
    html:not(.is-desktop-board) .is-post-page .circle-compose-back svg { display: block; }
    html:not(.is-desktop-board) .is-post-page .circle-compose-back-text { display: none; }
    html:not(.is-desktop-board) .is-post-page .circle-compose-head .publish {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
      z-index: 3;
      height: 52px;
      border-radius: 999px;
      font-size: 16.5px;
      font-weight: 600;
    }
    html:not(.is-desktop-board) .is-post-page .circle-compose-scroll { padding: 16px 18px calc(env(safe-area-inset-bottom, 0px) + 110px); }
    html:not(.is-desktop-board) .is-post-page .circle-compose-preview-post {
      display: flex;
      flex-direction: column;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
    }
    html:not(.is-desktop-board) .is-post-page .circle-compose-preview-post > .circle-private-head,
    html:not(.is-desktop-board) .is-post-page .circle-compose-preview-post > .circle-private-actions,
    html:not(.is-desktop-board) .is-post-page .circle-compose-preview-post > .circle-visibility,
    html:not(.is-desktop-board) .is-post-page .circle-photo-modes,
    html:not(.is-desktop-board) .is-post-page .circle-photo-tools .circle-collage-flat { display: none !important; }
    html:not(.is-desktop-board) .is-post-page .circle-photo-stage { order: 1; }
    html:not(.is-desktop-board) .is-post-page .circle-photo-tools { order: 2; margin: 0 0 14px; }
    html:not(.is-desktop-board) .is-post-page .circle-photo-tools .circle-photo-order { height: 34px; padding: 0 14px; background: #ecebe6; font-size: 14px; font-weight: 600; }
    html:not(.is-desktop-board) .is-post-page .circle-compose-input-wrap { order: 3; }
    html:not(.is-desktop-board) .is-post-page .circle-compose-input-wrap textarea { font-size: 16px; }
    html:not(.is-desktop-board) .is-post-page .circle-quote-slot { order: 4; }
    html:not(.is-desktop-board) .is-post-page .circle-photo-gallery { order: 5; }
    .circle-compose-settings {
      margin-top: 18px;
      overflow: hidden;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 0 0 1px #ecebe6;
    }
    .circle-compose-setting {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border: 0;
      border-bottom: 1px solid #f0efea;
      background: none;
      color: #20211f;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }
    .circle-compose-setting:last-child { border-bottom: 0; }
    .circle-compose-setting-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #f2f2f0; }
    .circle-compose-setting-label { flex: 1; min-width: 0; font-size: 15.5px; }
    .circle-compose-setting-value { flex: none; max-width: 48%; overflow: hidden; color: #9a9b94; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
    .circle-compose-setting-chev { flex: none; color: #b0b1aa; font-size: 20px; line-height: 1; }
    .circle-compose-switch { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: #d6d6d1; transition: background .15s; }
    .circle-compose-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
    .circle-compose-switch.is-on { background: #20211f; }
    .circle-compose-switch.is-on::after { transform: translateX(18px); }
    .circle-compose-check { padding: 3px 10px; border-radius: 999px; background: #20211f; color: #fff; font-size: 12.5px; font-weight: 600; }
    .circle-compose-check.is-off { background: #ecebe6; color: #6c6d67; }
    /* No photos yet: a shorter Add photo area, and no Edit photos button. */
    html:not(.is-desktop-board) .is-post-page .circle-photo-stage:not(:has(.is-photos, .is-collage)) { height: 150px; }
    html:not(.is-desktop-board) .is-post-page .circle-compose-preview-post:not(:has(.circle-attachment-preview.is-photos, .circle-attachment-preview.is-collage)) .circle-photo-tools { display: none; }
    html:not(.is-desktop-board) .is-post-page .circle-photo-tools .circle-photo-add-more { height: 34px; padding: 0 14px; background: #ecebe6; font-size: 14px; font-weight: 600; }
    .circle-photo-tools .circle-photo-add-more[hidden] { display: none; }

    /* New post page: text first, then square photo tiles and a + tile (like a phone's own post
       pages). The big preview is moved off-screen, not hidden, so grids can still measure. */
    .circle-compose-thumbs { display: none; }
    html:not(.is-desktop-board) .is-post-page .circle-compose-preview-post { position: relative; }
    html:not(.is-desktop-board) .is-post-page .circle-compose-input-wrap { order: 1; }
    html:not(.is-desktop-board) .is-post-page .circle-compose-input-wrap textarea { min-height: 72px; }
    html:not(.is-desktop-board) .is-post-page .circle-compose-thumbs { order: 2; display: block; margin: 6px 0 0; }
    html:not(.is-desktop-board) .is-post-page .circle-quote-slot { order: 3; }
    html:not(.is-desktop-board) .is-post-page .circle-photo-stage {
      position: absolute;
      top: 0;
      left: -200vw;
      width: calc(100vw - 36px);
      visibility: hidden;
      pointer-events: none;
    }
    html:not(.is-desktop-board) .is-post-page .circle-photo-tools { display: none !important; }
    /* The photo tiles themselves: css/photos/photo-kit.css (shared with New meetup). */
    /* Free style: the collage itself on the post page; left-out photos as small faded faces. */
    .circle-compose-collage { border-radius: 14px; overflow: hidden; cursor: pointer; }
    .circle-compose-left { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: #8a8b84; font-size: 12.5px; line-height: 1.35; }
    .circle-compose-left-faces { display: flex; flex: none; }
    .circle-compose-left-faces img { width: 30px; height: 30px; object-fit: cover; border-radius: 8px; border: 2px solid #f2f2ef; opacity: .55; }
    .circle-compose-left-faces img + img { margin-left: -10px; }
    .circle-compose-advanced.is-on { padding: 7px 14px; border-radius: 999px; background: #20211f; color: #fff; }
    .circle-compose-thumbs-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
    .circle-compose-layout-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #ecebe6; }
    .circle-compose-layout-switch button {
      padding: 7px 18px;
      border: 0;
      border-radius: 999px;
      background: none;
      color: #20211f;
      font: inherit;
      font-size: 14px;
      cursor: pointer;
    }
    .circle-compose-layout-switch button.is-on { background: #20211f; color: #fff; font-weight: 600; }
    .circle-compose-advanced { padding: 6px 2px; border: 0; background: none; color: #20211f; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
    .circle-compose-layout-note { margin: 8px 2px 0; color: #8a8b84; font-size: 12.5px; }