/* thisisbobby.cn — V9 production repairs */

/* Side A RedNote: restrained, consistent left-copy/right-portrait panel. */
.social-drawer.drawer-a { align-items: center !important; }
.drawer-a aside {
  width: min(640px, 88vw) !important;
  max-width: 640px !important;
  height: min(78vh, 680px) !important;
  max-height: 680px !important;
  margin-right: clamp(10px, 2vw, 28px) !important;
  padding: 20px 24px 18px !important;
  border: 1px solid rgba(238,233,223,.3) !important;
  overflow-y: auto !important;
}
.drawer-a .social-a-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(175px, .55fr) !important;
  gap: 20px !important;
  align-items: center !important;
  padding: 16px 0 18px !important;
}
.drawer-a .social-a-layout .social-account { min-width: 0 !important; }
.drawer-a .social-a-layout .social-account h2 { font-size: clamp(27px, 3vw, 38px) !important; line-height: .92 !important; }
.drawer-a .social-a-layout .social-account > small { font-size: 9px !important; line-height: 1.55 !important; }
.drawer-a .social-a-portrait,
.drawer-a aside .social-a-layout figure.social-a-portrait {
  width: min(100%, 190px) !important;
  max-width: 190px !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 1122 / 1402 !important;
  justify-self: end !important;
  background: #e7dac5 !important;
  overflow: hidden !important;
}
.drawer-a .social-a-portrait > img,
.drawer-a aside .social-a-layout figure.social-a-portrait > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #e7dac5 !important;
}
.drawer-a .social-a-portrait figcaption { font-size: 7px !important; padding: 8px 10px !important; }

/* Live Notes: one real list, five visible rows, manual scrollbar and explicit controls. */
.c-live-notes {
  position: relative !important;
  height: 470px !important;
  min-height: 470px !important;
  overflow: hidden !important;
  padding-right: 48px !important;
}
.c-live-viewport {
  height: 375px !important;
  min-height: 0 !important;
  max-height: 375px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(21,21,21,.4) transparent !important;
  scroll-snap-type: y proximity !important;
}
.c-live-viewport::-webkit-scrollbar { display: block !important; width: 5px !important; }
.c-live-viewport::-webkit-scrollbar-track { background: transparent !important; }
.c-live-viewport::-webkit-scrollbar-thumb { background: rgba(21,21,21,.36) !important; border-radius: 10px !important; }
.c-live-track,
.c-live-track.is-seamless-loop {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}
.c-live-track article {
  box-sizing: border-box !important;
  flex: none !important;
  width: 100% !important;
  min-height: 88px !important;
  padding: 14px 16px !important;
  scroll-snap-align: start !important;
}
.c-live-track [data-live-clone="true"] { display: none !important; }
.c-live-controls-v9 {
  position: absolute !important;
  top: 75px !important;
  right: 12px !important;
  bottom: 46px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 28px !important;
  border-left: 1px solid rgba(21,21,21,.25) !important;
  padding-left: 10px !important;
}
.c-live-controls-v9 button {
  width: 26px !important;
  height: 26px !important;
  border: 1px solid rgba(21,21,21,.38) !important;
  background: rgba(216,211,202,.72) !important;
  cursor: pointer !important;
}
.c-live-controls-v9 span {
  writing-mode: vertical-rl !important;
  font-size: 7px !important;
  letter-spacing: .18em !important;
  opacity: .6 !important;
}

/* B hero image: secondary becomes full-size when switched, on both desktop and mobile. */
.b-photo-reveal .photo-main,
.b-photo-reveal .photo-secondary {
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1), inset .45s, width .45s, height .45s !important;
}
.b-photo-reveal.is-alt .photo-main { opacity: 0 !important; transform: scale(.96) !important; pointer-events: none !important; }
.b-photo-reveal.is-alt .photo-secondary {
  display: block !important;
  z-index: 6 !important;
  opacity: 1 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 38px !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  transform: none !important;
}
.b-photo-reveal.is-alt .photo-secondary img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.b-photo-reveal.is-alt .photo-switch-hint { z-index: 8 !important; }

/* Four stable 16:9 video slots. */
.mobile-video-slot { display: none; }
.moving-video-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 9px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .15em !important;
}
.moving-video-head small { font-size: 7px !important; opacity: .56 !important; }
.moving-video-frame {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border: 1px solid rgba(21,21,21,.38) !important;
  background: #151515 !important;
}
.moving-video-frame video { width: 100% !important; height: 100% !important; object-fit: contain !important; background: #151515 !important; }
.moving-video-placeholder {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(238,233,223,.62) !important;
  padding: 16px !important;
  font-size: 8px !important;
  letter-spacing: .15em !important;
  text-align: center !important;
  pointer-events: none !important;
}
.moving-video-placeholder[hidden] { display: none !important; }
.side-video-block-v9 {
  width: min(920px, calc(100% - 84px)) !important;
  margin: 30px auto 72px !important;
  padding: 18px !important;
  border: 1px solid rgba(21,21,21,.32) !important;
  background: rgba(238,233,223,.22) !important;
}
.c-intro.has-video-v9 {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr) !important;
  align-items: center !important;
  gap: clamp(30px, 5vw, 70px) !important;
}
.c-intro-copy-v9 { min-width: 0 !important; }
.c-intro .side-video-c { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }

/* Managed Posts: backend additions never replace the fixed editorial content. */
.managed-stream-v9,
.managed-c-v9 {
  width: min(920px, calc(100% - 84px)) !important;
  margin: 38px auto 76px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(21,21,21,.3) !important;
  scroll-margin-top: 110px !important;
}
.c-now > .managed-c-v9,
.c-likes > .managed-c-v9 { width: 100% !important; margin: 34px 0 0 !important; }
.managed-stream-v9 > p,
.managed-c-v9 > p { font-size: 9px !important; font-weight: 800 !important; letter-spacing: .18em !important; }
.managed-grid-v9 { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 18px !important; margin-top: 16px !important; }
.managed-card-v9 { display: grid !important; grid-template-columns: minmax(120px,.38fr) minmax(0,.62fr) !important; gap: 16px !important; border: 1px solid rgba(21,21,21,.28) !important; padding: 14px !important; background: rgba(238,233,223,.2) !important; }
.managed-card-v9:not(:has(img)) { grid-template-columns: 1fr !important; }
.managed-card-v9 img { width: 100% !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; }
.managed-card-v9 small { font-size: 7px !important; letter-spacing: .16em !important; opacity: .62 !important; }
.managed-card-v9 h3 { margin: 8px 0 4px !important; font-size: 22px !important; line-height: 1.05 !important; }
.managed-card-v9 em { display: block !important; font-size: 9px !important; letter-spacing: .08em !important; opacity: .55 !important; }
.managed-card-v9 p { margin-top: 10px !important; font-size: 12px !important; line-height: 1.7 !important; }
.managed-card-v9 details { margin-top: 12px !important; }
.managed-card-v9 summary { cursor: pointer !important; font-size: 8px !important; letter-spacing: .12em !important; }

/* Footer contact and legal area. */
.footer-contact-v9 { position: relative !important; cursor: pointer !important; outline: none !important; }
.footer-contact-v9:focus-visible { outline: 1px solid currentColor !important; outline-offset: 10px !important; }
.footer-contact-hint {
  position: absolute !important;
  left: 0 !important;
  bottom: calc(100% + 12px) !important;
  z-index: 5 !important;
  min-width: 200px !important;
  padding: 11px 13px !important;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  pointer-events: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  transition: opacity .2s, transform .2s !important;
}
.footer-contact-hint small { display: block !important; margin-top: 4px !important; font-size: 7px !important; letter-spacing: .12em !important; opacity: .72 !important; }
.footer-contact-v9:hover .footer-contact-hint,
.footer-contact-v9:focus .footer-contact-hint { opacity: 1 !important; transform: translateY(0) !important; }
.contact-highlight-v9 { animation: contact-highlight-v9 1.6s ease !important; }
@keyframes contact-highlight-v9 { 0%,100% { box-shadow: none; } 45% { box-shadow: 0 0 0 6px rgba(49,90,158,.18); } }
.footer-meta-v9 .filing-link,
.footer-meta-v9 .filing-link span {
  font-family: Arial, "Noto Sans SC", sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  letter-spacing: .05em !important;
}
.footer-meta-v9 .filing-police { display: inline-flex !important; align-items: center !important; gap: 5px !important; }
.footer-meta-v9 .filing-police img { width: 14px !important; height: auto !important; flex: none !important; }
.back-to-top { bottom: var(--top-safe-bottom, 34px) !important; }


/* Legacy V10.4.0 HOME video rule; the V10.4.1 contract below overrides its placement. */
@media (min-width: 601px) {
  .side-neutral .mobile-video-slot.has-media {
    display: block !important;
    width: min(520px, 42vw) !important;
    margin: 24px 0 20px !important;
  }
  .side-neutral .mobile-video-slot:not(.has-media) { display: none !important; }
}

/* The former first-card-only C overlay is retired; every C card uses public-detail-drawer. */
.c-feature-detail-v1015 { display: none !important; }

@media (max-width: 600px) {
  .side-neutral .hero-copy { padding-bottom: 330px !important; }
  .drawer-a aside {
    width: 90vw !important;
    height: min(72svh, 590px) !important;
    max-height: 590px !important;
    margin: 0 3vw !important;
    padding: 18px 18px 16px !important;
  }

.drawer-a .social-a-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(130px, .88fr) !important;
    gap: 13px !important;
    align-items: start !important;
    padding: 12px 0 14px !important;
  }
  .drawer-a .social-a-layout .social-account h2 { font-size: 24px !important; }
  .drawer-a .social-a-layout .social-account > small { font-size: 7px !important; line-height: 1.45 !important; }
  .drawer-a .social-a-portrait,
  .drawer-a aside .social-a-layout figure.social-a-portrait {
    grid-row: auto !important;
    width: min(100%, 132px) !important;
    max-width: 132px !important;
    justify-self: end !important;
  }
  .drawer-a .social-account { grid-row: auto !important; }

  .c-live-notes { height: 430px !important; min-height: 430px !important; padding: 17px 42px 17px 17px !important; }
  .c-live-viewport { height: 335px !important; max-height: 335px !important; margin: 12px 0 8px !important; }
  .c-live-track article { min-height: 92px !important; padding: 14px !important; }
  .c-live-controls-v9 { top: 64px !important; right: 8px !important; bottom: 42px !important; }

  .side-neutral .mobile-video-slot {
    display: block !important;
    position: absolute !important;
    z-index: 9 !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 82px !important;
    width: auto !important;
    margin: 0 !important;
  }
  .site:not(.side-neutral) .mobile-video-slot { display: none !important; }
  .side-video-block-v9 { width: calc(100% - 36px) !important; margin: 24px 18px 48px !important; padding: 13px !important; }
  .c-intro.has-video-v9 { grid-template-columns: 1fr !important; gap: 22px !important; }
  .c-intro .side-video-c { width: 100% !important; }

  .managed-stream-v9,
  .managed-c-v9 { width: calc(100% - 36px) !important; margin: 28px 18px 48px !important; }
  .c-now > .managed-c-v9,
  .c-likes > .managed-c-v9 { width: 100% !important; margin: 28px 0 0 !important; }
  .managed-grid-v9 { grid-template-columns: 1fr !important; }
  .managed-card-v9 { grid-template-columns: 105px minmax(0,1fr) !important; gap: 12px !important; }
  .managed-card-v9 h3 { font-size: 18px !important; }

  .b-photo-reveal.is-alt .photo-secondary { bottom: 40px !important; }
  .footer-contact-hint { left: 0 !important; bottom: calc(100% + 8px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .c-live-viewport { scroll-behavior: auto !important; }
}

/* V10.0.3 targeted repairs. Current V10.0.2 visual design remains frozen. */

/* A and B retain their original content, but share the same drawer interaction. */
.social-drawer.drawer-a {
  justify-content: flex-end !important;
  align-items: stretch !important;
}
.drawer-a aside {
  width: min(640px, 92vw) !important;
  max-width: 640px !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  animation-name: drawer-in !important;
}

/* Live Notes and its photo use the same responsive row height on desktop. */
@media (min-width: 601px) {
  .c-forward-stage {
    align-items: stretch !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr) !important;
  }
  .c-forward-stage > .c-forward-image,
  .c-forward-stage > .c-live-notes {
    box-sizing: border-box !important;
    height: clamp(470px, 42vw, 560px) !important;
    min-height: 470px !important;
  }
  .c-forward-stage > .c-forward-image {
    aspect-ratio: auto !important;
  }
  .c-live-notes {
    display: flex !important;
    flex-direction: column !important;
  }
  .c-live-viewport {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }
}
.c-live-viewport {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}
.c-live-track,
.c-live-track.is-seamless-loop {
  animation: none !important;
  transform: none !important;
}

/* B uses one full-size frame for both photographs. */
.b-photo-reveal.is-alt-targeted .photo-main {
  opacity: 0 !important;
  transform: scale(.98) !important;
  pointer-events: none !important;
}
.b-photo-reveal.is-alt-targeted .photo-secondary {
  display: block !important;
  z-index: 6 !important;
  opacity: 1 !important;
  inset: 0 0 38px 0 !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  transform: none !important;
}
.b-photo-reveal.is-alt-targeted .photo-secondary img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.b-photo-reveal.is-alt-targeted .photo-switch-hint { z-index: 8 !important; }

/* Becoming copy keeps every approved sentence; only spacing/hierarchy changes. */
.c-intro.has-video-v9 {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .65fr) !important;
  align-items: start !important;
}
.c-intro-copy-v9 {
  display: grid !important;
  align-content: start !important;
  gap: 0 !important;
  max-width: 760px !important;
}
.c-intro-copy-v9 > .section-no { margin-bottom: 22px !important; }
.c-intro-copy-v9 > h2 { margin-bottom: 26px !important; }
.c-intro-copy-v9 > p:not(.section-no) { max-width: 680px !important; margin-bottom: 22px !important; }
.c-intro-copy-v9 > p:not(.section-no) em {
  display: block !important;
  margin-top: 14px !important;
  max-width: 620px !important;
}
.c-intro-copy-v9 > span { display: block !important; margin-top: 6px !important; }

@media (max-width: 600px) {
  .social-drawer.drawer-a { align-items: flex-end !important; }
  .drawer-a aside {
    width: 100% !important;
    max-width: none !important;
    height: min(715px, 91svh) !important;
    max-height: 91svh !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    animation-name: drawer-up !important;
  }
  .drawer-a .social-a-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(130px, .88fr) !important;
  }
  .c-live-notes {
    height: 430px !important;
    min-height: 430px !important;
  }
  .c-live-viewport {
    height: 335px !important;
    max-height: 335px !important;
    min-height: 335px !important;
  }
  .b-photo-reveal.is-alt-targeted .photo-secondary { bottom: 40px !important; }
  .c-intro.has-video-v9 { grid-template-columns: 1fr !important; gap: 26px !important; }
  .c-intro-copy-v9 > .section-no { margin-bottom: 16px !important; }
  .c-intro-copy-v9 > h2 { margin-bottom: 20px !important; }
  .c-intro-copy-v9 > p:not(.section-no) { margin-bottom: 18px !important; }
}

/* V10.0.4 unified interaction layer. The approved public design remains frozen. */

/* Legal lines use exactly the same typography and baseline. */
.footer-meta-v9 .filing-link,
.footer-meta-v9 .filing-link span,
.footer-meta-v9 .filing-icp,
.footer-meta-v9 .filing-police {
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  letter-spacing: .18em !important;
}
.footer-meta-v9 .filing-police { vertical-align: baseline !important; }
.footer-meta-v9 .filing-police img { width: 14px !important; height: 16px !important; object-fit: contain !important; }

/* Side A RedNote: keep the current drawer size; vertically center only the approved copy/portrait row. */
.drawer-a aside {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
}
.drawer-a .social-card-top { grid-row: 1 !important; }
.drawer-a .social-a-layout {
  grid-row: 3 !important;
  align-self: center !important;
  margin: 0 !important;
  padding-top: clamp(28px, 6vh, 72px) !important;
  padding-bottom: clamp(24px, 5vh, 58px) !important;
}
.drawer-a .qr-block { grid-row: 4 !important; }
.drawer-a .social-card-foot { grid-row: 5 !important; }

/* B selector shares the same anchor as A and C and never follows the photograph frame. */
.side-a .side-dots,
.side-b .side-dots,
.side-c .side-dots {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 42px !important;
  bottom: var(--switcher-safe-bottom,32px) !important;
  transform: none !important;
}

/* C Becoming composition lock (approved) — final balance:
   LEFT = section + Chinese title + English tagline, vertically balanced.
   RIGHT = C / BECOMING IN MOTION video + Chinese subtitle + English body.
   The authored DOM is the only owner; no runtime movement or duplication. */
.c-intro.c-intro-layout-locked.has-video-unified {
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr) !important;
  align-items: stretch !important;
  gap: clamp(52px, 5vw, 88px) !important;
  min-height: 0 !important;
}
.c-intro-copy-locked {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-self: stretch !important;
  min-width: 0 !important;
}
.c-intro-copy-locked > .section-no { margin: 0 !important; }
.c-intro-copy-locked > h2 {
  align-self: center !important;
  max-width: 690px !important;
  margin: clamp(24px, 4vh, 54px) 0 !important;
  font-family: Arial Narrow, Impact, "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC", sans-serif !important;
}
.c-intro-tagline-locked {
  display: block !important;
  align-self: end !important;
  max-width: 650px !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}
.c-intro-support-locked {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  min-width: 0 !important;
  gap: 20px !important;
}
.c-intro-support-locked > .side-video-c {
  width: 100% !important;
  margin: 0 !important;
}
.c-intro-caption-locked {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
}
.c-intro-caption-locked p {
  margin: 0 !important;
  font-size: clamp(13px, .82vw, 15px) !important;
  line-height: 1.72 !important;
}
.c-intro-caption-locked em {
  display: block !important;
  font-size: clamp(12px, .76vw, 14px) !important;
  line-height: 1.65 !important;
  opacity: .9 !important;
}
.ui-responsive-framework .c-intro.c-intro-layout-locked,
html.bobby-ui-1006 .site .c-intro.c-intro-layout-locked {
  min-height: 0 !important;
}

/* Dynamic entries use one editorial component in all three sides. */
.editorial-stream {
  --stream-accent: #151515;
  width: min(920px, calc(100% - 84px)) !important;
  margin: 48px auto 76px !important;
  padding-top: 0 !important;
  border-top: 1px solid rgba(21,21,21,.34) !important;
  border-top: 1px solid color-mix(in srgb, var(--stream-accent) 48%, transparent) !important;
}
.editorial-stream-b { --stream-accent: var(--b); }
.editorial-stream-c { --stream-accent: var(--c); }
.c-now > .editorial-stream,
.c-likes > .editorial-stream { width: 100% !important; margin: 38px 0 0 !important; }
.editorial-stream-head {
  display: grid !important;
  grid-template-columns: 52px 1fr !important;
  align-items: end !important;
  gap: 16px !important;
  min-height: 86px !important;
  padding: 18px 0 14px !important;
  border-bottom: 1px solid rgba(21,21,21,.26) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--stream-accent) 35%, transparent) !important;
}
.editorial-stream-head > span {
  font-family: Georgia, serif !important;
  font-size: 40px !important;
  line-height: .82 !important;
  color: var(--stream-accent) !important;
}
.editorial-stream-head p { margin: 0 !important; }
.editorial-stream-head b { display: block !important; font-size: 10px !important; letter-spacing: .17em !important; }
.editorial-stream-head small { display: block !important; margin-top: 5px !important; font-size: 12px !important; font-weight: 400 !important; }
.editorial-stream-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 500px)) !important;
  justify-content: start !important;
  gap: 18px !important;
  margin-top: 18px !important;
}
.editorial-note-card {
  appearance: none !important;
  width: 100% !important;
  min-height: 220px !important;
  display: grid !important;
  grid-template-columns: minmax(130px, .42fr) minmax(0, .58fr) !important;
  gap: 16px !important;
  padding: 14px !important;
  border: 1px solid rgba(21,21,21,.25) !important;
  border: 1px solid color-mix(in srgb, var(--stream-accent) 34%, transparent) !important;
  background: rgba(238,233,223,.18) !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform .24s ease, background .24s ease, border-color .24s ease !important;
}
.editorial-note-card.is-text-only { grid-template-columns: 1fr !important; }
.editorial-note-card:hover,
.editorial-note-card:focus-visible {
  transform: translateY(-3px) !important;
  border-color: var(--stream-accent) !important;
  background: rgba(238,233,223,.42) !important;
  outline: none !important;
}
.editorial-note-card figure { position: relative !important; min-width: 0 !important; margin: 0 !important; overflow: hidden !important; }
.editorial-note-card figure img { width: 100% !important; height: 100% !important; min-height: 190px !important; object-fit: cover !important; }
.editorial-note-card figcaption {
  position: absolute !important;
  left: 8px !important;
  top: 8px !important;
  padding: 5px 7px !important;
  background: rgba(21,21,21,.82) !important;
  color: #eee9df !important;
  font-size: 7px !important;
  letter-spacing: .12em !important;
}
.editorial-note-copy { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
.editorial-note-copy small { font-size: 7px !important; letter-spacing: .16em !important; opacity: .64 !important; }
.editorial-note-copy b { margin-top: 12px !important; font-size: 25px !important; line-height: 1.04 !important; font-weight: 500 !important; }
.editorial-note-copy em { display: block !important; margin-top: 5px !important; font-size: 9px !important; line-height: 1.45 !important; letter-spacing: .08em !important; opacity: .58 !important; }
.editorial-note-copy p { margin: 14px 0 0 !important; font-size: 12px !important; line-height: 1.7 !important; }
.editorial-note-copy i { margin-top: auto !important; padding-top: 18px !important; font-size: 8px !important; font-style: normal !important; letter-spacing: .11em !important; }

/* Dynamic entry detail reuses the site's drawer language. */
.public-detail-drawer {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 125 !important;
  justify-content: flex-end !important;
  background: rgba(9,9,9,.62) !important;
  backdrop-filter: blur(7px) !important;
}
.public-detail-drawer.is-open { display: flex !important; animation: drawer-fade .25s both !important; }
.public-detail-drawer aside {
  --detail-accent: #151515;
  width: min(720px, 94vw) !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) auto !important;
  padding: 28px 32px 24px !important;
  overflow: hidden !important;
  background: #eee9df !important;
  color: #151515 !important;
  border-left: 8px solid var(--detail-accent) !important;
  animation: drawer-in .5s cubic-bezier(.22,1,.36,1) both !important;
}
.public-detail-drawer.is-side-b aside { --detail-accent: var(--b); }
.public-detail-drawer.is-side-c aside { --detail-accent: var(--c); }
.public-detail-top { display: flex !important; justify-content: space-between !important; align-items: center !important; padding-bottom: 18px !important; border-bottom: 1px solid rgba(21,21,21,.35) !important; }
.public-detail-top span,
.public-detail-top button,
.public-detail-foot { font-size: 8px !important; font-weight: 800 !important; letter-spacing: .16em !important; }
.public-detail-top button { border: 0 !important; background: transparent !important; cursor: pointer !important; }
.public-detail-body { overflow-y: auto !important; padding: 28px 0 !important; }
.public-detail-body figure { width: 100% !important; margin: 0 0 26px !important; }
.public-detail-body figure img { width: 100% !important; max-height: 440px !important; object-fit: cover !important; }
.public-detail-copy > small { font-size: 8px !important; letter-spacing: .15em !important; }
.public-detail-copy h2 { margin: 16px 0 6px !important; font-size: clamp(38px, 5vw, 72px) !important; line-height: .95 !important; font-weight: 500 !important; }
.public-detail-copy > em { display: block !important; max-width: 560px !important; font-size: 11px !important; line-height: 1.5 !important; letter-spacing: .08em !important; }
.public-detail-copy time { display: block !important; margin-top: 18px !important; font-size: 8px !important; letter-spacing: .12em !important; }
.public-detail-copy .detail-summary { margin: 28px 0 0 !important; font-size: 16px !important; line-height: 1.8 !important; }
.public-detail-copy .detail-body-zh { margin-top: 24px !important; font-size: 15px !important; line-height: 1.95 !important; white-space: pre-line !important; }
.public-detail-copy .detail-body-en { margin-top: 22px !important; font-size: 11px !important; line-height: 1.75 !important; font-style: italic !important; white-space: pre-line !important; opacity: .75 !important; }
.public-detail-foot { padding-top: 16px !important; border-top: 1px solid rgba(21,21,21,.32) !important; }
html.detail-open { overflow: hidden !important; }

/* Edge/older Chromium layout fallbacks without touching approved visual rules. */
@supports not (height: 100svh) {
  .drawer-a aside,
  .drawer-b aside { height: 100vh !important; }
  .social-drawer aside { max-height: 100vh !important; }
}

@media (max-width: 600px) {
  .footer-meta-v9 .filing-link,
  .footer-meta-v9 .filing-link span,
  .footer-meta-v9 .filing-icp,
  .footer-meta-v9 .filing-police { font-size: 10px !important; letter-spacing: .12em !important; }

  .drawer-a .social-a-layout {
    padding-top: clamp(22px, 5vh, 44px) !important;
    padding-bottom: clamp(18px, 4vh, 38px) !important;
  }
  .side-a .side-dots,
  .side-b .side-dots,
  .side-c .side-dots {
    left: 18px !important;
    right: auto !important;
    bottom: 18px !important;
  }
  .c-intro.c-intro-layout-locked.has-video-unified {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 24px !important;
  }
  .c-intro-copy-locked {
    display: flex !important;
    flex-direction: column !important;
    align-self: auto !important;
  }
  .c-intro-copy-locked > .section-no { margin-bottom: 16px !important; }
  .c-intro-copy-locked > h2 {
    align-self: auto !important;
    max-width: none !important;
    margin: 0 0 20px !important;
  }
  .c-intro-support-locked { gap: 18px !important; }
  .c-intro-tagline-locked { align-self: auto !important; margin: 0 !important; }
  .c-intro-caption-locked p { font-size: 12px !important; }
  .c-intro-caption-locked em { font-size: 11px !important; }

  .editorial-stream { width: calc(100% - 36px) !important; margin: 34px 18px 52px !important; }
  .c-now > .editorial-stream,
  .c-likes > .editorial-stream { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .editorial-stream-grid { grid-template-columns: 1fr !important; }
  .editorial-note-card { grid-template-columns: 108px minmax(0,1fr) !important; min-height: 170px !important; gap: 12px !important; padding: 11px !important; }
  .editorial-note-card figure img { min-height: 150px !important; }
  .editorial-note-copy b { font-size: 20px !important; }
  .editorial-note-copy p { font-size: 11px !important; }

  .public-detail-drawer { align-items: flex-end !important; }
  .public-detail-drawer aside {
    width: 100% !important;
    height: min(90svh, 820px) !important;
    border-left: 0 !important;
    border-top: 7px solid var(--detail-accent) !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 24px 20px 20px !important;
    animation: drawer-up .45s cubic-bezier(.22,1,.36,1) both !important;
  }
}

/* --------------------------------------------------------------------------
   V10.0.5 UI FRAMEWORK
   Shared public components only. Existing page typography, color and chapter
   design remain frozen outside the selectors below.
   -------------------------------------------------------------------------- */

:root {
  --ui-ink: #151515;
  --ui-paper: #eee9df;
  --ui-side-a: #151515;
  --ui-side-b: var(--b);
  --ui-side-c: var(--c);
  --ui-hairline: rgba(21,21,21,.28);
  --ui-feed-width: 900px;
  --ui-drawer-width: 620px;
}

/* LegalFooter ------------------------------------------------------------- */
footer .footer-meta-v9 {
  font-family: Arial,"Noto Sans SC",sans-serif !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: .11em !important;
}
footer .footer-meta-v9 > span,
footer .footer-meta-v9 > a,
footer .footer-meta-v9 .filing-link,
footer .footer-meta-v9 .filing-link > span,
footer .footer-meta-v9 .filing-icp,
footer .footer-meta-v9 .filing-police {
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}
footer .footer-meta-v9 .filing-police {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  vertical-align: middle !important;
}
footer .footer-meta-v9 .filing-police img {
  width: 13px !important;
  height: 14px !important;
  object-fit: contain !important;
}

/* SideSwitcher ------------------------------------------------------------ */
.site.side-a .side-switcher-ui,
.site.side-b .side-switcher-ui,
.site.side-c .side-switcher-ui {
  position: fixed !important;
  z-index: 88 !important;
  right: 42px !important;
  bottom: var(--switcher-safe-bottom,32px) !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  transform: none !important;
}
.site.side-neutral .side-switcher-ui { display: none !important; }
.side-b .b-photo-reveal .b-caption-contained {
  right: 0 !important;
  bottom: 40px !important;
  left: auto !important;
  max-width: 190px !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* LiveNotesPanel ---------------------------------------------------------- */
.c-live-notes {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  padding: 24px !important;
  overflow: hidden !important;
}
.c-live-notes > p {
  padding-right: 78px !important;
}
.c-live-viewport {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 16px 0 12px !important;
  padding-right: 7px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(21,21,21,.34) transparent !important;
}
.c-live-viewport::-webkit-scrollbar { width: 5px !important; }
.c-live-viewport::-webkit-scrollbar-track { background: transparent !important; }
.c-live-viewport::-webkit-scrollbar-thumb { background: rgba(21,21,21,.34) !important; border-radius: 9px !important; }
.c-live-track,
.c-live-track.is-seamless-loop {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}
.c-live-track article {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 88px !important;
  padding: 14px 16px !important;
  scroll-snap-align: none !important;
}
.c-live-controls-v9,
.c-live-controls-v10 { display: none !important; }
.c-live-controls-ui {
  position: absolute !important;
  top: 17px !important;
  right: 17px !important;
  z-index: 4 !important;
  display: flex !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
}
.c-live-controls-ui button {
  width: 29px !important;
  height: 29px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(21,21,21,.38) !important;
  background: rgba(216,211,202,.88) !important;
  color: #151515 !important;
  cursor: pointer !important;
  transition: background .2s ease,color .2s ease !important;
}
.c-live-controls-ui button:hover,
.c-live-controls-ui button:focus-visible {
  background: #151515 !important;
  color: #eee9df !important;
  outline: none !important;
}

/* EditorialFeed ----------------------------------------------------------- */
.editorial-stream {
  --stream-accent: var(--ui-side-a);
  width: min(1120px,calc(100% - 84px)) !important;
  margin: 58px auto 82px !important;
  padding: 0 !important;
  border: 0 !important;
  scroll-margin-top: 110px !important;
}
.editorial-stream-b { --stream-accent: var(--ui-side-b); }
.editorial-stream-c { --stream-accent: var(--ui-side-c); }
.c-now > .editorial-stream,
.c-likes > .editorial-stream {
  width: 100% !important;
  margin: 44px 0 0 !important;
}
.editorial-stream-head {
  display: grid !important;
  grid-template-columns: 58px minmax(0,1fr) !important;
  align-items: end !important;
  gap: 18px !important;
  padding: 18px 0 16px !important;
  border-top: 1px solid color-mix(in srgb,var(--stream-accent) 32%,transparent) !important;
  border-bottom: 1px solid color-mix(in srgb,var(--stream-accent) 32%,transparent) !important;
}
.editorial-stream-head > span {
  font-family: Georgia,serif !important;
  font-size: 42px !important;
  line-height: .82 !important;
  color: var(--stream-accent) !important;
}
.editorial-stream-head p { margin: 0 !important; }
.editorial-stream-head b {
  display: block !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: .17em !important;
}
.editorial-stream-head small {
  display: block !important;
  margin-top: 5px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
.editorial-stream-subsection .editorial-stream-head {
  grid-template-columns: 38px minmax(0,1fr) !important;
  padding-top: 14px !important;
  padding-bottom: 13px !important;
}
.editorial-stream-subsection .editorial-stream-head > span { font-size: 29px !important; }
.editorial-stream-grid {
  width: min(100%,var(--ui-feed-width)) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  margin-top: 18px !important;
}
.editorial-note-card {
  appearance: none !important;
  width: 100% !important;
  min-height: 250px !important;
  display: grid !important;
  grid-template-columns: minmax(210px,42%) minmax(0,58%) !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb,var(--stream-accent) 34%,transparent) !important;
  background: rgba(238,233,223,.13) !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: transform .22s ease,border-color .22s ease,background .22s ease !important;
}
.editorial-note-card.is-text-only { grid-template-columns: 1fr !important; }
.editorial-note-card:hover,
.editorial-note-card:focus-visible {
  transform: translateY(-2px) !important;
  border-color: var(--stream-accent) !important;
  background: rgba(238,233,223,.34) !important;
  outline: none !important;
}
.editorial-note-card figure {
  position: relative !important;
  min-width: 0 !important;
  min-height: 250px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-right: 1px solid color-mix(in srgb,var(--stream-accent) 28%,transparent) !important;
}
.editorial-note-card figure img {
  width: 100% !important;
  height: 100% !important;
  min-height: 250px !important;
  object-fit: cover !important;
}
.editorial-note-card figcaption {
  position: absolute !important;
  left: 10px !important;
  top: 10px !important;
  padding: 5px 8px !important;
  background: rgba(21,21,21,.84) !important;
  color: #eee9df !important;
  font-size: 7px !important;
  letter-spacing: .12em !important;
}
.editorial-note-copy {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  padding: 24px 26px 20px !important;
}
.editorial-note-copy small { font-size: 7px !important; letter-spacing: .16em !important; opacity: .62 !important; }
.editorial-note-copy b { margin-top: 15px !important; font-size: 28px !important; line-height: 1.03 !important; font-weight: 500 !important; }
.editorial-note-copy em { display: block !important; margin-top: 6px !important; font-size: 9px !important; line-height: 1.5 !important; letter-spacing: .08em !important; opacity: .58 !important; }
.editorial-note-copy p { margin: 16px 0 0 !important; font-size: 12px !important; line-height: 1.75 !important; }
.editorial-note-copy i {
  margin-top: auto !important;
  padding-top: 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  font-size: 8px !important;
  font-style: normal !important;
  letter-spacing: .11em !important;
}
.editorial-note-copy i span { margin-left: auto !important; }

/* EditorialDrawer --------------------------------------------------------- */
.public-detail-drawer { z-index: 125 !important; }
.public-detail-drawer aside {
  --detail-accent: var(--ui-side-a);
  width: min(var(--ui-drawer-width),94vw) !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) auto !important;
  padding: 28px 30px 22px !important;
  overflow: hidden !important;
  background: #eee9df !important;
  color: #151515 !important;
  border-left: 7px solid var(--detail-accent) !important;
}
.public-detail-drawer.is-side-b aside { --detail-accent: var(--ui-side-b); }
.public-detail-drawer.is-side-c aside { --detail-accent: var(--ui-side-c); }
.public-detail-body { overflow-y: auto !important; padding: 24px 0 30px !important; }
.public-detail-body figure { margin: 0 0 24px !important; }
.public-detail-body figure img { width: 100% !important; max-height: 390px !important; object-fit: cover !important; }
.public-detail-copy h2 { margin: 15px 0 6px !important; font-size: clamp(36px,4.4vw,62px) !important; line-height: .96 !important; }

@media (max-width:600px) {
  footer .footer-meta-v9 { font-size: 8px !important; line-height: 1.65 !important; letter-spacing: .09em !important; }
  .site.side-a .side-switcher-ui,
  .site.side-b .side-switcher-ui,
  .site.side-c .side-switcher-ui {
    left: 18px !important;
    right: auto !important;
    bottom: var(--switcher-safe-bottom,18px) !important;
  }
  .side-b .b-photo-reveal .b-caption-contained {
    right: 0 !important;
    bottom: 40px !important;
    max-width: 142px !important;
  }
  .c-live-notes { height: 430px !important; min-height: 430px !important; padding: 18px !important; }
  .c-live-notes > p { padding-right: 72px !important; }
  .c-live-controls-ui { top: 14px !important; right: 14px !important; }
  .c-live-controls-ui button { width: 27px !important; height: 27px !important; }
  .c-live-viewport { margin-top: 14px !important; }
  .editorial-stream { width: calc(100% - 36px) !important; margin: 38px 18px 56px !important; }
  .c-now > .editorial-stream,
  .c-likes > .editorial-stream { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .editorial-stream-head { grid-template-columns: 42px minmax(0,1fr) !important; gap: 12px !important; }
  .editorial-stream-head > span { font-size: 32px !important; }
  .editorial-stream-subsection .editorial-stream-head { grid-template-columns: 32px minmax(0,1fr) !important; }
  .editorial-stream-subsection .editorial-stream-head > span { font-size: 25px !important; }
  .editorial-note-card {
    min-height: 170px !important;
    grid-template-columns: 108px minmax(0,1fr) !important;
  }
  .editorial-note-card figure,
  .editorial-note-card figure img { min-height: 170px !important; }
  .editorial-note-copy { padding: 15px 14px 13px !important; }
  .editorial-note-copy b { margin-top: 10px !important; font-size: 20px !important; }
  .editorial-note-copy p { margin-top: 10px !important; font-size: 10px !important; line-height: 1.6 !important; }
  .editorial-note-copy i { padding-top: 12px !important; font-size: 7px !important; flex-direction: column !important; gap: 4px !important; }
  .editorial-note-copy i span { margin-left: 0 !important; }
  .public-detail-drawer { align-items: flex-end !important; }
  .public-detail-drawer aside {
    width: 100% !important;
    height: min(90svh,820px) !important;
    border-left: 0 !important;
    border-top: 7px solid var(--detail-accent) !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 23px 20px 18px !important;
  }
}

/* V10.0.5 final designer/user review adjustments ------------------------- */
footer .footer-meta-v9 {
  font-size: 10px !important;
  line-height: 1.55 !important;
  letter-spacing: .09em !important;
}
.site.side-a .side-switcher-ui,
.site.side-b .side-switcher-ui,
.site.side-c .side-switcher-ui {
  right: 104px !important;
}
.c-live-viewport {
  scroll-padding-block: 4px !important;
  scrollbar-gutter: stable !important;
}
.editorial-stream-grid.is-single {
  max-width: 900px !important;
}
@media (max-width:600px) {
  footer .footer-meta-v9 {
    font-size: 9px !important;
    line-height: 1.55 !important;
    letter-spacing: .08em !important;
  }
  .site.side-a .side-switcher-ui,
  .site.side-b .side-switcher-ui,
  .site.side-c .side-switcher-ui {
    right: auto !important;
  }
}

/* --------------------------------------------------------------------------
   V10.0.6 FINAL INTEGRATION
   One responsive framework for the approved public design. These selectors
   are deliberately scoped to the shared components and named Side sections.
   -------------------------------------------------------------------------- */

:root {
  --ui-page-gutter: clamp(24px, 5.25vw, 84px);
  --ui-page-max: 1120px;
  --ui-section-gap: clamp(54px, 7vw, 96px);
  --ui-motion-time: 360ms;
  --ui-motion-ease: cubic-bezier(.22,1,.36,1);
}

/* LegalFooter: legal information is subordinate and aligned, never enlarged. */
footer .footer-meta-v9,
footer .footer-meta-v9 > span,
footer .footer-meta-v9 > a,
footer .footer-meta-v9 .filing-link,
footer .footer-meta-v9 .filing-link > span,
footer .footer-meta-v9 .filing-icp,
footer .footer-meta-v9 .filing-police {
  font-family: Arial,"Noto Sans SC",sans-serif !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  line-height: 1.58 !important;
  letter-spacing: .085em !important;
}
footer .footer-meta-v9 .filing-police {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
footer .footer-meta-v9 .filing-police img {
  width: 11px !important;
  height: 12px !important;
}

/* A RedNote final layout: no meaningless spacer; all information is one flow. */
.drawer-a aside {
  grid-template-rows: auto minmax(0,1fr) !important;
  align-content: stretch !important;
}
.drawer-a .social-a-layout {
  grid-row: 2 !important;
  align-self: stretch !important;
  align-content: center !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(22px,4vh,46px) 0 !important;
  border-bottom: 0 !important;
}
.drawer-a .social-account {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 0 !important;
}
.drawer-a .social-account .social-qr {
  position: static !important;
  inset: auto !important;
  margin: clamp(22px,3vh,36px) 0 0 !important;
  transform: none !important;
}
.drawer-a .social-a-portrait { align-self: center !important; }

/* Public video headers show editorial meaning only, not an internal ratio tag. */
.moving-video-head small { display: none !important; }
.moving-video-head { justify-content: flex-start !important; }

/* SideSwitcher: one fixed anchor, meaningful hover descriptions, no overlap. */
.site.side-a .side-switcher-ui,
.site.side-b .side-switcher-ui,
.site.side-c .side-switcher-ui {
  right: clamp(24px, 4.4vw, 72px) !important;
  bottom: var(--switcher-safe-bottom,32px) !important;
}
.side-switcher-ui button { position: relative !important; }
@media (hover:hover) and (pointer:fine) {
  .side-switcher-ui button::after {
    content: attr(data-side-hint);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    width: max-content;
    max-width: 190px;
    padding: 7px 9px;
    border: 1px solid rgba(21,21,21,.36);
    background: rgba(238,233,223,.96);
    color: #151515;
    font-size: 7px;
      letter-spacing: .1em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%,6px);
    transition: opacity .18s ease,transform .18s ease;
  }
  .side-switcher-ui button:hover::after,
  .side-switcher-ui button:focus-visible::after {
    opacity: 1;
    transform: translate(-50%,0);
  }
}

/* B uses the same outer visual frame as A/C; its collage remains inside it. */
@media (min-width:601px) {
  .side-a .a-portrait,
  .side-b .b-photo-reveal,
  .side-c .c-hero-visual {
    width: min(38vw,560px) !important;
    height: min(69vh,650px) !important;
    min-height: 480px !important;
    top: 5% !important;
    right: 5vw !important;
  }
  .side-b .b-photo-reveal { overflow: hidden !important; }
  .side-b .b-photo-reveal .photo-secondary {
    left: 16px !important;
    bottom: 54px !important;
    width: 40% !important;
    height: 38% !important;
    padding: 4px !important;
  }
  .side-b .b-photo-reveal .b-caption-contained {
    right: 12px !important;
    bottom: 12px !important;
    max-width: 180px !important;
  }
}

/* One calm transition path replaces competing page-flip animations. */
.page-turn-sheet { display: none !important; }
.site.is-page-flipping .hero-copy,
.site.is-page-flipping .a-portrait,
.site.is-page-flipping .b-photo-reveal,
.site.is-page-flipping .c-hero-visual,
.site.is-page-flipping .side-dots { animation: none !important; }
.site .hero-copy,
.site .a-portrait,
.site .b-photo-reveal,
.site .c-hero-visual,
.site .side-switcher-ui {
  transition: opacity var(--ui-motion-time) ease, transform var(--ui-motion-time) var(--ui-motion-ease) !important;
}
.site.ui-side-switching .hero-copy,
.site.ui-side-switching .a-portrait,
.site.ui-side-switching .b-photo-reveal,
.site.ui-side-switching .c-hero-visual {
  opacity: .38 !important;
  transform: translateY(5px) scale(.992) !important;
}
@media (prefers-reduced-motion:reduce) {
  .site .hero-copy,.site .a-portrait,.site .b-photo-reveal,.site .c-hero-visual,.site .side-switcher-ui { transition: none !important; }
}

/* LiveNotesPanel: native smooth scroll, compact integrated controls. */
.c-live-viewport {
  scroll-behavior: smooth !important;
  scroll-snap-type: y proximity !important;
  scrollbar-gutter: auto !important;
}
.c-live-track article { scroll-snap-align: start !important; }
.c-live-controls-ui {
  top: 18px !important;
  right: 18px !important;
  gap: 4px !important;
  padding: 3px !important;
  border: 1px solid rgba(21,21,21,.24) !important;
  background: rgba(216,211,202,.82) !important;
}
.c-live-controls-ui button {
  width: 25px !important;
  height: 25px !important;
  border: 0 !important;
  background: transparent !important;
}

/* Editorial sections use the native chapter language of each Side. */
.a-profile > .a-managed-chapter,
.b-profile > .b-managed-chapter {
  width: min(var(--ui-page-max),calc(100% - (var(--ui-page-gutter) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: var(--ui-section-gap) !important;
  margin-bottom: var(--ui-section-gap) !important;
  padding: 0 !important;
}
.a-managed-chapter .a-chapter-label,
.b-managed-chapter .b-chapter-head {
  margin-bottom: 24px !important;
}
.editorial-stream-embedded {
  width: 100% !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
}
.editorial-stream-embedded > .editorial-stream-head { display: none !important; }
.c-now > .editorial-stream-embedded,
.c-likes > .editorial-stream-embedded {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.editorial-stream-grid {
  width: min(100%,900px) !important;
  max-width: 100% !important;
}
.editorial-stream-grid:not(.is-single) {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
.editorial-stream-grid:not(.is-single) .editorial-note-card {
  grid-template-columns: 1fr !important;
}
.editorial-stream-grid:not(.is-single) .editorial-note-card figure,
.editorial-stream-grid:not(.is-single) .editorial-note-card figure img {
  min-height: 210px !important;
  height: 210px !important;
  border-right: 0 !important;
  border-bottom: 1px solid color-mix(in srgb,var(--stream-accent) 28%,transparent) !important;
}

/* Responsive framework: content keeps coherent proportions on wide/zoomed views. */
.ui-responsive-framework .a-profile > .a-chapter,
.ui-responsive-framework .b-profile > .b-chapter,
.ui-responsive-framework .c-profile > .c-now,
.ui-responsive-framework .c-profile > .c-likes,
.ui-responsive-framework .c-profile > .c-contact {
  box-sizing: border-box !important;
}
@media (min-width:2200px) {
  .ui-responsive-framework {
    width: 80% !important;
    zoom: 1.25;
  }
}
@media (min-width:3400px) {
  .ui-responsive-framework {
    width: 62.5% !important;
    zoom: 1.6;
  }
}
@media (min-width:5200px) {
  .ui-responsive-framework {
    width: 45.4545% !important;
    zoom: 2.2;
  }
}

/* Mobile: centered welcome; controls remain outside the welcome card. */
@media (max-width:600px) {
  footer .footer-meta-v9,
  footer .footer-meta-v9 > span,
  footer .footer-meta-v9 > a,
  footer .footer-meta-v9 .filing-link,
  footer .footer-meta-v9 .filing-link > span { font-size: 8px !important; }
  .entrance {
    display: grid !important;
    place-items: center !important;
    padding: max(24px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom)) !important;
  }
  .entrance-copy {
    position: relative !important;
    inset: auto !important;
    width: min(100%,360px) !important;
    margin: 0 auto !important;
    transform: none !important;
    text-align: center !important;
  }
  .entrance-actions { justify-content: center !important; }
  .entrance-note { left: 18px !important; right: 18px !important; bottom: max(18px,env(safe-area-inset-bottom)) !important; text-align: center !important; }
  .site.side-a .side-switcher-ui,
  .site.side-b .side-switcher-ui,
  .site.side-c .side-switcher-ui {
    left: 18px !important;
    right: auto !important;
    bottom: var(--switcher-safe-bottom,18px) !important;
  }
  .drawer-a aside {
    grid-template-rows: auto minmax(0,1fr) !important;
    height: min(88svh,700px) !important;
  }
  .drawer-a .social-a-layout {
    align-content: center !important;
    padding: 16px 0 20px !important;
  }
  .drawer-a .social-account .social-qr { margin-top: 18px !important; }
  .editorial-stream-grid:not(.is-single) { grid-template-columns: 1fr !important; }
  .a-profile > .a-managed-chapter,
  .b-profile > .b-managed-chapter {
    width: calc(100% - 36px) !important;
    margin: 44px 18px 60px !important;
  }
  .editorial-note-card,
  .editorial-stream-grid:not(.is-single) .editorial-note-card {
    grid-template-columns: 108px minmax(0,1fr) !important;
  }
  .editorial-stream-grid:not(.is-single) .editorial-note-card figure,
  .editorial-stream-grid:not(.is-single) .editorial-note-card figure img {
    min-height: 170px !important;
    height: 100% !important;
    border-right: 1px solid color-mix(in srgb,var(--stream-accent) 28%,transparent) !important;
    border-bottom: 0 !important;
  }
  .c-live-controls-ui { top: 14px !important; right: 14px !important; }
}

/* --------------------------------------------------------------------------
   V10.0.6 FINAL UI LOCK — last scoped overrides after cross-device audit.
   -------------------------------------------------------------------------- */

/* Browser zoom is corrected on the root by JS; never resize the site twice. */
@media (min-width:2200px) {
  .ui-responsive-framework { width: 100% !important; zoom: 1 !important; }
}
@media (min-width:3400px) {
  .ui-responsive-framework { width: 100% !important; zoom: 1 !important; }
}
@media (min-width:5200px) {
  .ui-responsive-framework { width: 100% !important; zoom: 1 !important; }
}

/* A RedNote: remove the empty spacer. QR follows the profile row; only the
   unobtrusive footer may use the remaining flexible space. */
.drawer-a aside {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto auto minmax(0,1fr) auto !important;
  align-content: stretch !important;
}
.drawer-a .social-card-top { grid-row: 1 !important; }
.drawer-a .social-a-layout {
  grid-row: 3 !important;
  align-self: auto !important;
  align-content: center !important;
  min-height: 260px !important;
  padding: 18px 0 20px !important;
  border-bottom: 1px solid rgba(21,21,21,.25) !important;
}
.drawer-a .qr-block {
  grid-row: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 18px 0 10px !important;
}
.drawer-a .social-card-foot {
  grid-row: 6 !important;
  align-self: end !important;
}

/* B visual uses exactly one frame, like A/C. Both photographs occupy the
   complete frame and cross-fade; no detached mini-card or floating caption. */
.side-b .b-photo-reveal {
  overflow: hidden !important;
  isolation: isolate !important;
}
.side-b .b-photo-reveal .photo-main,
.side-b .b-photo-reveal .photo-secondary {
  position: absolute !important;
  inset: 0 0 38px !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  transform: none !important;
  transition: opacity 320ms var(--ui-motion-ease), transform 420ms var(--ui-motion-ease) !important;
}
.side-b .b-photo-reveal .photo-main { opacity: 1 !important; z-index: 1 !important; }
.side-b .b-photo-reveal .photo-secondary { opacity: 0 !important; z-index: 2 !important; pointer-events: none !important; }
.side-b .b-photo-reveal.is-alt-targeted .photo-main { opacity: 0 !important; transform: scale(1.018) !important; }
.side-b .b-photo-reveal.is-alt-targeted .photo-secondary { opacity: 1 !important; transform: scale(1) !important; }
.side-b .b-photo-reveal .photo-main img,
.side-b .b-photo-reveal .photo-secondary img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.side-b .b-photo-reveal .photo-switch-hint {
  z-index: 5 !important;
  left: 14px !important;
  right: auto !important;
  bottom: 12px !important;
}
.side-b .b-photo-reveal .b-caption-contained {
  z-index: 5 !important;
  right: 12px !important;
  bottom: 12px !important;
  width: min(48%,210px) !important;
  max-width: min(48%,210px) !important;
}

/* One interaction rhythm across all Sides. */
.site .hero-copy,
.site .a-portrait,
.site .b-photo-reveal,
.site .c-hero-visual {
  will-change: opacity, transform !important;
  backface-visibility: hidden !important;
}
.site.ui-side-switching .hero-copy,
.site.ui-side-switching .a-portrait,
.site.ui-side-switching .b-photo-reveal,
.site.ui-side-switching .c-hero-visual {
  opacity: .68 !important;
  transform: translateY(2px) scale(.997) !important;
}

/* Mobile visitor welcome is centred and cannot collide with the Side switcher. */
@media (max-width:600px) {
  .visitor-note,
  .visitor-note.is-visible {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(calc(100vw - 36px),360px) !important;
    max-width: 360px !important;
    transform: translate(-50%,-50%) !important;
    margin: 0 !important;
  }
  .side-b h1 {
    max-width: 100% !important;
    font-size: clamp(42px,11.8vw,48px) !important;
    line-height: .84 !important;
  }
  .drawer-a aside {
    grid-template-rows: auto auto auto auto minmax(12px,1fr) auto !important;
    height: min(92svh,760px) !important;
  }
  .drawer-a .social-a-layout {
    min-height: 0 !important;
    padding: 14px 0 16px !important;
  }
  .drawer-a .qr-block { padding: 14px 0 8px !important; }
  .side-b .b-photo-reveal .photo-main,
  .side-b .b-photo-reveal .photo-secondary {
    inset: 0 0 38px !important;
    width: 100% !important;
    height: auto !important;
  }
  .side-b .b-photo-reveal .b-caption-contained {
    right: 8px !important;
    bottom: 8px !important;
    width: min(56%,160px) !important;
    max-width: min(56%,160px) !important;
  }
  .side-b .b-photo-reveal .photo-switch-hint {
    left: 8px !important;
    bottom: 8px !important;
  }
}

/* Final drawer flow after design review: the intentional breathing room sits
   above the identity row, never between the identity and its QR continuation. */
.drawer-a aside {
  grid-template-rows: auto auto minmax(0,1fr) auto auto !important;
}
.drawer-a .social-card-top { grid-row: 1 !important; }
.drawer-a .social-a-layout {
  grid-row: 3 !important;
  align-self: end !important;
  min-height: 0 !important;
  padding: 18px 0 20px !important;
}
.drawer-a .qr-block { grid-row: 4 !important; }
.drawer-a .social-card-foot { grid-row: 5 !important; align-self: end !important; }

/* A/B/C video cards do not repeat Side labels once real media is present. */
.side-video-block-v9.has-media > .moving-video-head { display: none !important; }
.side-video-block-v9.has-media { padding-top: 0 !important; }

/* C uses the same editorial card measure as A/B rather than a full-width
   database-looking panel. The native C section heading remains the context. */
.c-now > .editorial-stream-embedded,
.c-likes > .editorial-stream-embedded {
  width: min(100%,760px) !important;
  max-width: 760px !important;
  margin-right: auto !important;
}
.c-now > .editorial-stream-embedded .editorial-stream-grid,
.c-likes > .editorial-stream-embedded .editorial-stream-grid {
  width: 100% !important;
  max-width: 760px !important;
}

/* The final two A/B chapters inherit the same chapter rhythm as 01–03. */
.a-profile > .a-becoming,
.b-profile > .b-road-end,
.a-profile > .a-managed-chapter,
.b-profile > .b-managed-chapter {
  scroll-margin-top: 96px !important;
}

@media (max-width:600px) {
  .drawer-a aside { grid-template-rows: auto auto minmax(0,1fr) auto auto !important; }
  .drawer-a .social-a-layout { align-self: end !important; }
  .c-now > .editorial-stream-embedded,
  .c-likes > .editorial-stream-embedded {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Browser zoom-out / ultra-wide view: keep the approved page as one coherent
   1600px editorial canvas instead of letting viewport units pull elements to
   opposite corners. Browser zoom still works; the layout simply stays whole. */
@media (min-width:2200px) {
  html.bobby-ui-1006 { zoom: 1 !important; }
  body { background-color: var(--paper) !important; }
  .ui-responsive-framework {
    width: 1600px !important;
    max-width: 1600px !important;
    min-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    zoom: 1 !important;
  }
  .ui-responsive-framework .hero {
    min-height: 902px !important;
    height: auto !important;
  }
  .ui-responsive-framework .side-a .a-portrait,
  .ui-responsive-framework .side-b .b-photo-reveal,
  .ui-responsive-framework .side-c .c-hero-visual {
    right: 80px !important;
    top: 45px !important;
  }
  .ui-responsive-framework .a-becoming { min-height: 760px !important; }
  .ui-responsive-framework .b-road-end { min-height: 740px !important; }
  .ui-responsive-framework .c-intro { min-height: 720px !important; }
}

/* V10.0.6 zoom/ultra-wide lock. The root class survives React class rewrites,
   so the approved 1600px editorial canvas remains coherent at browser zoom-out. */
@media (min-width:2200px) {
  html.bobby-ui-1006 body {
    background: var(--paper) !important;
  }
  html.bobby-ui-1006 .site {
    width: 1600px !important;
    min-width: 1600px !important;
    max-width: 1600px !important;
    margin-inline: auto !important;
    zoom: 1 !important;
  }
  html.bobby-ui-1006 .site .hero {
    min-height: 902px !important;
    height: auto !important;
  }
  html.bobby-ui-1006 .site.side-a .a-portrait,
  html.bobby-ui-1006 .site.side-b .b-photo-reveal,
  html.bobby-ui-1006 .site.side-c .c-hero-visual {
    right: 80px !important;
    top: 45px !important;
  }
  html.bobby-ui-1006 .site.side-a .side-switcher-ui,
  html.bobby-ui-1006 .site.side-b .side-switcher-ui,
  html.bobby-ui-1006 .site.side-c .side-switcher-ui {
    right: 42px !important;
  }
  html.bobby-ui-1006 .site .a-becoming { min-height: 760px !important; }
  html.bobby-ui-1006 .site .b-road-end { min-height: 740px !important; }
  html.bobby-ui-1006 .site .c-intro { min-height: 720px !important; }
}

@media (min-width:2200px) {
  html.bobby-ui-1006 .site.side-a .side-switcher-ui,
  html.bobby-ui-1006 .site.side-b .side-switcher-ui,
  html.bobby-ui-1006 .site.side-c .side-switcher-ui {
    right: calc((100vw - 1600px) / 2 + 42px) !important;
  }
  html.bobby-ui-1006 .back-to-top {
    right: calc((100vw - 1600px) / 2 + 42px) !important;
  }
}

/* Final shared chapter contract. 01–05 keep the same responsive boundaries
   without changing each Side's approved internal composition. */
.responsive-chapter {
  box-sizing: border-box !important;
  max-width: 100% !important;
  scroll-margin-top: 96px !important;
}

/* Direct manipulation removes the delayed/ghost tap feeling on mobile while
   preserving the approved transition and button artwork. */
.side-switcher-ui button,
.landing-side-selector button,
.object .plane,
.b-photo-reveal,
.editorial-card,
.editorial-drawer-close {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* --------------------------------------------------------------------------
   V10.0.7 UI LOCK — fixed public UI contract
   Dynamic content may change copy/media only; it must not change layout.
   -------------------------------------------------------------------------- */
html.bobby-ui-1007 #about.manifesto {
  padding: clamp(76px, 7.4vw, 112px) clamp(20px, 3vw, 42px) !important;
}
html.bobby-ui-1007 #about .section-no { margin-bottom: 42px !important; }
html.bobby-ui-1007 #about .about-visual {
  width: min(920px, 100%) !important;
  margin: 0 auto 38px !important;
}
html.bobby-ui-1007 #about .about-field { aspect-ratio: 2 / 1 !important; }
html.bobby-ui-1007 #about .about-grid {
  width: min(920px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
  align-items: start !important;
  gap: clamp(32px, 5vw, 70px) !important;
}
html.bobby-ui-1007 #about .about-grid > p {
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}
html.bobby-ui-1007 #about .about-rhythm-fixed > span {
  display: block !important;
  font-size: clamp(16px, 1.35vw, 19px) !important;
  line-height: 1.55 !important;
}
html.bobby-ui-1007 #about .about-rhythm-fixed > small {
  display: block !important;
  margin-top: 12px !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}
html.bobby-ui-1007 #about .about-body-fixed > span {
  display: block !important;
  font-size: clamp(16px, 1.3vw, 18px) !important;
  line-height: 1.75 !important;
}
html.bobby-ui-1007 #about .about-body-fixed > em {
  display: block !important;
  margin-top: 14px !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: .075em !important;
  line-height: 1.75 !important;
  opacity: .58 !important;
}

/* The actual A drawer DOM has one title and one two-column identity block.
   It is a content-height flow; no synthetic grid row may create a spacer. */
html.bobby-ui-1007 .drawer-a aside {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  grid-template: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100svh !important;
  overflow-y: auto !important;
}
html.bobby-ui-1007 .drawer-a .drawer-close { flex: 0 0 auto !important; }
html.bobby-ui-1007 .drawer-a .social-a-layout {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  grid-row: auto !important;
  margin: 0 !important;
  padding: 20px 0 8px !important;
}
html.bobby-ui-1007 .drawer-a .social-account {
  align-self: start !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
}
html.bobby-ui-1007 .drawer-a .social-account .social-qr {
  position: static !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
}

/* A/B/C switcher and TOP occupy different corners and respect safe areas. */
html.bobby-ui-1007 .site.side-a .side-switcher-ui,
html.bobby-ui-1007 .site.side-b .side-switcher-ui,
html.bobby-ui-1007 .site.side-c .side-switcher-ui {
  left: max(24px, env(safe-area-inset-left)) !important;
  right: auto !important;
  bottom: max(28px, env(safe-area-inset-bottom)) !important;
}
html.bobby-ui-1007 .back-to-top {
  left: auto !important;
  right: max(24px, env(safe-area-inset-right)) !important;
  bottom: max(28px, env(safe-area-inset-bottom)) !important;
}

/* Poster-first video rendering: never expose a black unloaded frame. */
html.bobby-ui-1007 .moving-video-frame {
  background: var(--paper) !important;
  background-image: radial-gradient(#15151512 .55px, transparent .75px) !important;
  background-size: 5px 5px !important;
}
html.bobby-ui-1007 .moving-video-frame video {
  background: transparent !important;
}
html.bobby-ui-1007 .moving-video-placeholder {
  z-index: 2 !important;
  background: linear-gradient(135deg, #d8d3ca 0%, #c7c1b6 100%) !important;
  color: #151515 !important;
  transition: opacity 180ms ease !important;
}
html.bobby-ui-1007 .has-poster .moving-video-placeholder,
html.bobby-ui-1007 .is-frame-ready .moving-video-placeholder {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 700px) {
  html.bobby-ui-1007 #about.manifesto { padding: 72px 20px !important; }
  html.bobby-ui-1007 #about .section-no { margin-bottom: 30px !important; }
  html.bobby-ui-1007 #about .about-visual { margin-bottom: 30px !important; }
  html.bobby-ui-1007 #about .about-field { aspect-ratio: 4 / 3 !important; }
  html.bobby-ui-1007 #about .about-grid {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }
  html.bobby-ui-1007 #about .about-body-fixed > em { margin-top: 11px !important; }
  html.bobby-ui-1007 .drawer-a aside {
    width: min(455px, 100vw) !important;
    height: auto !important;
    max-height: 92svh !important;
    padding: 24px 20px 20px !important;
  }

html.bobby-ui-1007 .drawer-a .social-a-layout {
    grid-template-columns: minmax(0, .9fr) minmax(132px, 1.1fr) !important;
    gap: 14px !important;
    padding: 16px 0 4px !important;
  }
  html.bobby-ui-1007 .site.side-a .side-switcher-ui,
  html.bobby-ui-1007 .site.side-b .side-switcher-ui,
  html.bobby-ui-1007 .site.side-c .side-switcher-ui {
    left: max(14px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  html.bobby-ui-1007 .back-to-top {
    left: auto !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 2200px) {
  html.bobby-ui-1007 .site.side-a .side-switcher-ui,
  html.bobby-ui-1007 .site.side-b .side-switcher-ui,
  html.bobby-ui-1007 .site.side-c .side-switcher-ui {
    left: calc((100vw - 1600px) / 2 + 42px) !important;
    right: auto !important;
  }
  html.bobby-ui-1007 .back-to-top {
    left: auto !important;
    right: calc((100vw - 1600px) / 2 + 42px) !important;
  }
}

/* --------------------------------------------------------------------------
   V10.0.8 REGRESSION LOCK — canonical public behavior contract
   This is the only section that may redefine the four repaired systems below.
   Historical rules remain for traceability, but this scoped contract wins.
   -------------------------------------------------------------------------- */

/* 1. Social drawers: A and B use one interaction model at every breakpoint. */
html.bobby-ui-1008 .social-drawer.drawer-a,
html.bobby-ui-1008 .social-drawer.drawer-b {
  justify-content: flex-end !important;
  align-items: stretch !important;
}
html.bobby-ui-1008 .social-drawer.drawer-a > aside,
html.bobby-ui-1008 .social-drawer.drawer-b > aside {
  box-sizing: border-box !important;
  width: min(455px, 92vw) !important;
  max-width: 455px !important;
  height: 100svh !important;
  min-height: 0 !important;
  max-height: 100svh !important;
  margin: 0 !important;
  padding: 30px 32px 25px !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  animation-name: drawer-in !important;
}
html.bobby-ui-1008 .drawer-a .social-card-top,
html.bobby-ui-1008 .drawer-a .social-card-title,
html.bobby-ui-1008 .drawer-a .social-a-layout,
html.bobby-ui-1008 .drawer-a .qr-block,
html.bobby-ui-1008 .drawer-a .social-card-foot {
  flex: 0 0 auto !important;
  grid-row: auto !important;
}
html.bobby-ui-1008 .drawer-a .social-a-layout {
  align-self: stretch !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 22px 0 !important;
}
/* The QR block, not the footer, absorbs the remaining vertical room. This
   keeps the footer on the bottom rule exactly like Side B and removes the
   blank page below it. */
html.bobby-ui-1008 .drawer-a > aside > .qr-block {
  margin-top: auto !important;
  padding-top: 24px !important;
}
html.bobby-ui-1008 .drawer-a > aside > .social-card-foot {
  margin-top: 18px !important;
  align-self: stretch !important;
}
/* Static/fallback drawer markup keeps its QR inside the account. */
html.bobby-ui-1008 .drawer-a .social-account > .social-qr {
  margin-top: 22px !important;
}

@media (max-width: 600px) {
  html.bobby-ui-1008 .social-drawer.drawer-a,
  html.bobby-ui-1008 .social-drawer.drawer-b {
    align-items: flex-end !important;
  }
  html.bobby-ui-1008 .social-drawer.drawer-a > aside,
  html.bobby-ui-1008 .social-drawer.drawer-b > aside {
    width: 100% !important;
    max-width: none !important;
    height: min(690px, 92svh) !important;
    max-height: 92svh !important;
    padding: 23px 22px 20px !important;
    border-radius: 18px 18px 0 0 !important;
    animation-name: drawer-up !important;
  }

html.bobby-ui-1008 .drawer-a .social-a-layout {
    grid-template-columns: minmax(0, .9fr) minmax(132px, 1.1fr) !important;
    gap: 14px !important;
    padding: 16px 0 10px !important;
  }
  html.bobby-ui-1008 .drawer-a > aside > .qr-block {
    padding-top: 18px !important;
  }
}

/* 2. Floating controls: JS owns bottom offset; CSS only owns the corner. */
html.bobby-ui-1008 .site.side-a .side-switcher-ui,
html.bobby-ui-1008 .site.side-b .side-switcher-ui,
html.bobby-ui-1008 .site.side-c .side-switcher-ui {
  position: fixed !important;
  z-index: 48 !important;
  left: max(24px, env(safe-area-inset-left)) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--switcher-safe-bottom, max(32px, env(safe-area-inset-bottom))) !important;
  transform: none !important;
  pointer-events: auto !important;
}
html.bobby-ui-1008 .site.is-page-flipping .side-switcher-ui,
html.bobby-ui-1008 .site.is-transitioning .side-switcher-ui {
  pointer-events: auto !important;
}
html.bobby-ui-1008 .back-to-top {
  position: fixed !important;
  z-index: 48 !important;
  left: auto !important;
  right: max(24px, env(safe-area-inset-right)) !important;
  top: auto !important;
  bottom: var(--top-safe-bottom, max(34px, env(safe-area-inset-bottom))) !important;
}
@media (max-width: 720px) {
  html.bobby-ui-1008 .site.side-a .side-switcher-ui,
  html.bobby-ui-1008 .site.side-b .side-switcher-ui,
  html.bobby-ui-1008 .site.side-c .side-switcher-ui {
    left: max(14px, env(safe-area-inset-left)) !important;
    bottom: var(--switcher-safe-bottom, max(18px, env(safe-area-inset-bottom))) !important;
  }
  html.bobby-ui-1008 .back-to-top {
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: var(--top-safe-bottom, max(30px, env(safe-area-inset-bottom))) !important;
  }
}
@media (min-width: 2200px) {
  html.bobby-ui-1008 .site.side-a .side-switcher-ui,
  html.bobby-ui-1008 .site.side-b .side-switcher-ui,
  html.bobby-ui-1008 .site.side-c .side-switcher-ui {
    left: calc((100vw - 1600px) / 2 + 42px) !important;
  }
  html.bobby-ui-1008 .back-to-top {
    right: calc((100vw - 1600px) / 2 + 42px) !important;
  }
}

/* 3. Managed Posts: one card/media contract for A, B and C. */
html.bobby-ui-1008 .editorial-stream {
  --stream-accent: #151515;
  box-sizing: border-box !important;
}
html.bobby-ui-1008 .editorial-stream-a { --stream-accent: var(--a); }
html.bobby-ui-1008 .editorial-stream-b { --stream-accent: #183d32; }
html.bobby-ui-1008 .editorial-stream-c { --stream-accent: var(--c); }
html.bobby-ui-1008 .editorial-stream-grid,
html.bobby-ui-1008 .editorial-stream-grid.is-single,
html.bobby-ui-1008 .c-now > .editorial-stream-embedded .editorial-stream-grid,
html.bobby-ui-1008 .c-likes > .editorial-stream-embedded .editorial-stream-grid {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
html.bobby-ui-1008 .editorial-stream-grid.is-single {
  grid-template-columns: minmax(0, 1fr) !important;
}
html.bobby-ui-1008 .editorial-note-card,
html.bobby-ui-1008 .editorial-stream-grid:not(.is-single) .editorial-note-card {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%) !important;
  align-items: stretch !important;
  border: 1px solid color-mix(in srgb, var(--stream-accent) 34%, transparent) !important;
  background: rgba(238, 233, 223, .34) !important;
  overflow: hidden !important;
}
html.bobby-ui-1008 .editorial-note-card.is-text-only {
  grid-template-columns: minmax(0, 1fr) !important;
}
html.bobby-ui-1008 .editorial-note-card > figure,
html.bobby-ui-1008 .editorial-stream-grid:not(.is-single) .editorial-note-card > figure {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 230px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  border: 0 !important;
  border-right: 1px solid color-mix(in srgb, var(--stream-accent) 28%, transparent) !important;
  background: color-mix(in srgb, var(--paper) 82%, var(--stream-accent) 18%) !important;
  overflow: hidden !important;
}
html.bobby-ui-1008 .editorial-note-card > figure > img,
html.bobby-ui-1008 .editorial-stream-grid:not(.is-single) .editorial-note-card > figure > img {
  width: 100% !important;
  height: 100% !important;
  max-height: 360px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}
html.bobby-ui-1008 .editorial-note-card > figure > figcaption {
  position: absolute !important;
  left: 9px !important;
  bottom: 9px !important;
  margin: 0 !important;
}
html.bobby-ui-1008 .editorial-note-card > .editorial-note-copy {
  box-sizing: border-box !important;
  min-width: 0 !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
html.bobby-ui-1008 .editorial-note-card > .editorial-note-copy > i {
  width: 100% !important;
  margin-top: auto !important;
}
html.bobby-ui-1008 .c-now > .editorial-stream-embedded,
html.bobby-ui-1008 .c-likes > .editorial-stream-embedded {
  width: 100% !important;
  max-width: none !important;
  margin: 28px 0 0 !important;
}
@media (max-width: 900px) {
  html.bobby-ui-1008 .editorial-stream-grid,
  html.bobby-ui-1008 .editorial-stream-grid.is-single,
  html.bobby-ui-1008 .c-now > .editorial-stream-embedded .editorial-stream-grid,
  html.bobby-ui-1008 .c-likes > .editorial-stream-embedded .editorial-stream-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
@media (max-width: 600px) {
  html.bobby-ui-1008 .editorial-note-card,
  html.bobby-ui-1008 .editorial-stream-grid:not(.is-single) .editorial-note-card {
    grid-template-columns: minmax(112px, 36%) minmax(0, 64%) !important;
  }
  html.bobby-ui-1008 .editorial-note-card.is-text-only {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html.bobby-ui-1008 .editorial-note-card > figure,
  html.bobby-ui-1008 .editorial-stream-grid:not(.is-single) .editorial-note-card > figure {
    min-height: 190px !important;
  }
  html.bobby-ui-1008 .editorial-note-card > figure > img,
  html.bobby-ui-1008 .editorial-stream-grid:not(.is-single) .editorial-note-card > figure > img {
    max-height: 280px !important;
  }
  html.bobby-ui-1008 .editorial-note-card > .editorial-note-copy {
    padding: 17px 15px !important;
  }
}

/* 4. Video states: a configured source is loading/playable, never “upcoming”. */
html.bobby-ui-1008 .moving-video-frame {
  position: relative !important;
  background: var(--paper) !important;
  background-image: radial-gradient(#15151512 .55px, transparent .75px) !important;
  background-size: 5px 5px !important;
}
html.bobby-ui-1008 .moving-video-frame video {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}
html.bobby-ui-1008 .moving-video-placeholder {
  z-index: 2 !important;
  color: #151515 !important;
  background: linear-gradient(135deg, #d8d3ca 0%, #c7c1b6 100%) !important;
}
html.bobby-ui-1008 .has-media.has-poster .moving-video-placeholder,
html.bobby-ui-1008 .has-media.is-frame-ready .moving-video-placeholder {
  display: none !important;
}

/* --------------------------------------------------------------------------
   V10.0.10 LAYOUT CONTRACT
   Fixed UI geometry remains unchanged. These selectors only assign one owner
   to the A/B RedNote layout, floating-control collision logic and public Posts.
   -------------------------------------------------------------------------- */

/* 1. RedNote: A and B share exactly the same fixed shell. A fills its middle
   row with the approved portrait/copy composition instead of shortening the
   drawer or inserting an empty spacer. */
html.bobby-ui-1010 .social-drawer.drawer-a,
html.bobby-ui-1010 .social-drawer.drawer-b {
  justify-content: flex-end !important;
  align-items: stretch !important;
}
html.bobby-ui-1010 .social-drawer.drawer-a > aside,
html.bobby-ui-1010 .social-drawer.drawer-b > aside {
  box-sizing: border-box !important;
  width: min(455px, 92vw) !important;
  max-width: 455px !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  margin: 0 !important;
  padding: 30px 32px 25px !important;
  display: grid !important;
  align-content: stretch !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-radius: 0 !important;
}
@supports not (height: 100dvh) {
  html.bobby-ui-1010 .social-drawer.drawer-a > aside,
  html.bobby-ui-1010 .social-drawer.drawer-b > aside {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }
}
html.bobby-ui-1010 .drawer-a > aside {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
}
html.bobby-ui-1010 .drawer-b > aside {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto !important;
}
html.bobby-ui-1010 .social-drawer > aside > .social-card-top { grid-row: 1 !important; }
html.bobby-ui-1010 .social-drawer > aside > .social-card-title { grid-row: 2 !important; }
html.bobby-ui-1010 .drawer-a > aside > .qr-block {
  grid-row: 4 !important;
  margin-top: 0 !important;
  padding: 21px 0 !important;
  align-self: end !important;
}
html.bobby-ui-1010 .drawer-a > aside > .social-card-foot {
  grid-row: 5 !important;
  margin-top: 17px !important;
}
html.bobby-ui-1010 .drawer-a > aside > .social-a-layout {
  grid-row: auto !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 24px 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(170px, .92fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  align-self: stretch !important;
  overflow: hidden !important;
}
html.bobby-ui-1010 .drawer-a .social-account {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
html.bobby-ui-1010 .drawer-a .social-a-portrait,
html.bobby-ui-1010 .drawer-a aside .social-a-layout figure.social-a-portrait {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  overflow: hidden !important;
}
html.bobby-ui-1010 .drawer-a .social-a-portrait > img,
html.bobby-ui-1010 .drawer-a aside .social-a-layout figure.social-a-portrait > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}
html.bobby-ui-1010 .drawer-b > aside > .social-card-title + div {
  grid-row: 3 !important;
  min-height: 0 !important;
}
html.bobby-ui-1010 .drawer-b > aside > .social-card-title + div > .social-account {
  min-height: 0 !important;
  padding: 27px 0 23px !important;
}
html.bobby-ui-1010 .drawer-b > aside > .social-photo-reveal {
  grid-row: 4 !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 0 20px !important;
}
html.bobby-ui-1010 .drawer-b > aside > .qr-block {
  grid-row: 5 !important;
  margin-top: 0 !important;
  padding: 21px 0 !important;
}
html.bobby-ui-1010 .drawer-b > aside > .social-card-foot {
  grid-row: 6 !important;
  margin-top: 17px !important;
}
html.bobby-ui-1010 .drawer-a .social-qr,
html.bobby-ui-1010 .drawer-b .social-qr { margin-top: auto !important; }

@media (max-width: 600px) {
  html.bobby-ui-1010 .social-drawer.drawer-a,
  html.bobby-ui-1010 .social-drawer.drawer-b {
    align-items: stretch !important;
  }
  html.bobby-ui-1010 .social-drawer.drawer-a > aside,
  html.bobby-ui-1010 .social-drawer.drawer-b > aside {
    width: calc(100% - 14px) !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 26px 26px 22px !important;
    border-radius: 0 !important;
  }
  html.bobby-ui-1010 .drawer-a > aside > .social-a-layout {
    padding: 20px 0 !important;
    grid-template-columns: minmax(0, 1.04fr) minmax(132px, .96fr) !important;
    gap: 14px !important;
  }
  html.bobby-ui-1010 .drawer-a .social-a-portrait,
  html.bobby-ui-1010 .drawer-a aside .social-a-layout figure.social-a-portrait {
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  html.bobby-ui-1010 .social-drawer > aside > .qr-block {
    grid-template-columns: minmax(132px, 44%) minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 18px 0 !important;
  }
}

/* 2. Floating controls keep the approved right-hand dock. JavaScript only
   changes the vertical safe distance when Footer collision is real. */
html.bobby-ui-1010 .site.side-a .fixed-side-switcher-v1010,
html.bobby-ui-1010 .site.side-b .fixed-side-switcher-v1010,
html.bobby-ui-1010 .site.side-c .fixed-side-switcher-v1010 {
  left: auto !important;
  right: 104px !important;
  bottom: var(--switcher-safe-bottom, 32px) !important;
  pointer-events: auto !important;
}
html.bobby-ui-1010 .back-to-top {
  left: auto !important;
  right: 24px !important;
  bottom: var(--top-safe-bottom, 24px) !important;
}
html.bobby-ui-1010 .fixed-side-switcher-v1010.is-footer-occluded-v1010,
html.bobby-ui-1010 .back-to-top.is-footer-occluded-v1010 {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.bobby-ui-1010 .site.is-page-flipping .fixed-side-switcher-v1010,
html.bobby-ui-1010 .site.is-transitioning .fixed-side-switcher-v1010 {
  pointer-events: auto !important;
}
@media (max-width: 720px) {
  html.bobby-ui-1010 .site.side-a .fixed-side-switcher-v1010,
  html.bobby-ui-1010 .site.side-b .fixed-side-switcher-v1010,
  html.bobby-ui-1010 .site.side-c .fixed-side-switcher-v1010 {
    left: auto !important;
    right: 78px !important;
    bottom: var(--switcher-safe-bottom, 18px) !important;
  }
  html.bobby-ui-1010 .back-to-top {
    right: 18px !important;
    bottom: var(--top-safe-bottom, 18px) !important;
  }
}

/* 3. Public Posts: one isolated component for A/B/C. The unique class names
   cannot be captured by legacy a-chapter, b-chapter or embedded C rules. */
html.bobby-ui-1010 .post-feed-v1010 {
  --post-accent: #151515;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 110px 42px !important;
  border-top: 1px solid rgba(21,21,21,.45) !important;
  display: block !important;
  color: inherit !important;
}
html.bobby-ui-1010 .post-feed-b-v1010 { --post-accent: var(--b); }
html.bobby-ui-1010 .post-feed-c-v1010 { --post-accent: var(--c); }
html.bobby-ui-1010 .post-feed-shell-v1010 {
  box-sizing: border-box !important;
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 54px !important;
}
html.bobby-ui-1010 .post-feed-head-v1010 {
  min-width: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 22px !important;
  padding-top: 2px !important;
}
html.bobby-ui-1010 .post-feed-head-v1010 > span {
  flex: 0 0 auto !important;
  color: var(--post-accent) !important;
  font-family: Georgia, serif !important;
  font-size: 64px !important;
  font-weight: 500 !important;
  line-height: .78 !important;
}
html.bobby-ui-1010 .post-feed-head-v1010 p { margin: 0 !important; }
html.bobby-ui-1010 .post-feed-head-v1010 p > span {
  display: block !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
}
html.bobby-ui-1010 .post-feed-head-v1010 b {
  display: block !important;
  margin-top: 8px !important;
  font-size: 9px !important;
  letter-spacing: .17em !important;
}
html.bobby-ui-1010 .post-feed-grid-v1010 {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
html.bobby-ui-1010 .post-feed-grid-v1010.is-single {
  grid-template-columns: minmax(0, 1fr) !important;
}
html.bobby-ui-1010 .post-card-v1010 {
  appearance: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 360px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%) !important;
  align-items: stretch !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--post-accent) 35%, transparent) !important;
  background: rgba(238,233,223,.22) !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}
html.bobby-ui-1010 .post-card-v1010.is-text-only {
  grid-template-columns: minmax(0, 1fr) !important;
}
html.bobby-ui-1010 .post-card-media-v1010 {
  position: relative !important;
  min-width: 0 !important;
  min-height: 360px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: color-mix(in srgb, #d8d3ca 82%, var(--post-accent) 18%) !important;
  border-right: 1px solid color-mix(in srgb, var(--post-accent) 28%, transparent) !important;
}
html.bobby-ui-1010 .post-card-media-v1010 > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}
html.bobby-ui-1010 .post-card-media-v1010 > figcaption {
  position: absolute !important;
  left: 10px !important;
  top: 10px !important;
  padding: 7px 9px !important;
  background: rgba(21,21,21,.84) !important;
  color: #eee9df !important;
  font-size: 7px !important;
  letter-spacing: .13em !important;
}
html.bobby-ui-1010 .post-card-copy-v1010 {
  min-width: 0 !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
}
html.bobby-ui-1010 .post-card-copy-v1010 > small {
  font-size: 7px !important;
  letter-spacing: .16em !important;
  opacity: .64 !important;
}
html.bobby-ui-1010 .post-card-copy-v1010 > b {
  margin-top: 14px !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1.04 !important;
  font-weight: 500 !important;
}
html.bobby-ui-1010 .post-card-copy-v1010 > em {
  display: block !important;
  margin-top: 6px !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
  letter-spacing: .08em !important;
  opacity: .58 !important;
}
html.bobby-ui-1010 .post-card-copy-v1010 > p {
  margin: 18px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
}
html.bobby-ui-1010 .post-card-copy-v1010 > i {
  margin-top: auto !important;
  padding-top: 22px !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  font-size: 8px !important;
  font-style: normal !important;
  letter-spacing: .11em !important;
}
html.bobby-ui-1010 .post-card-copy-v1010 > i span { margin-left: auto !important; }

/* Keep the already-correct full-image detail behaviour. */
html.bobby-ui-1010 .public-detail-body figure {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  background: color-mix(in srgb, var(--paper) 86%, var(--detail-accent) 14%) !important;
}
html.bobby-ui-1010 .public-detail-body figure img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 900px) {
  html.bobby-ui-1010 .post-feed-v1010 { padding: 80px 20px !important; }
  html.bobby-ui-1010 .post-feed-shell-v1010 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
  }
  html.bobby-ui-1010 .post-feed-grid-v1010,
  html.bobby-ui-1010 .post-feed-grid-v1010.is-single {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
@media (max-width: 600px) {
  html.bobby-ui-1010 .post-feed-v1010 { padding: 68px 20px !important; }
  html.bobby-ui-1010 .post-feed-head-v1010 > span { font-size: 53px !important; }
  html.bobby-ui-1010 .post-card-v1010 {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html.bobby-ui-1010 .post-card-media-v1010 {
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    border-right: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--post-accent) 28%, transparent) !important;
  }
  html.bobby-ui-1010 .post-card-copy-v1010 { padding: 20px 18px 22px !important; }
  html.bobby-ui-1010 .post-card-copy-v1010 > b { font-size: 25px !important; }
  html.bobby-ui-1010 .post-card-copy-v1010 > i {
    flex-direction: column !important;
    gap: 5px !important;
  }
  html.bobby-ui-1010 .post-card-copy-v1010 > i span { margin-left: 0 !important; }
  html.bobby-ui-1010 .public-detail-drawer aside {
    width: 100% !important;
    max-width: none !important;
    height: 94svh !important;
    max-height: 94svh !important;
  }
}

/* Preserve the V10.0.9 mobile video correction while the layout contract is
   active; no video UI geometry is changed in this release. */
html.bobby-ui-1010 .moving-video-placeholder {
  appearance: none !important;
  border: 0 !important;
  font: inherit !important;
}
html.bobby-ui-1010 .has-media:not(.has-poster):not(.is-frame-ready) .moving-video-placeholder {
  pointer-events: auto !important;
  cursor: pointer !important;
}
html.bobby-ui-1010 .has-media.has-poster .moving-video-placeholder,
html.bobby-ui-1010 .has-media.is-frame-ready .moving-video-placeholder,
html.bobby-ui-1010 .moving-video-placeholder[hidden] { display: none !important; }
html.bobby-ui-1010 .moving-video-frame video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}


/* ========================================================================
   V10.0.12 C CONTENT PRESERVATION
   Original C chapters remain the sole UI owners. Managed posts are appended
   to their existing grids and never replace or hide fixed content.
   ======================================================================== */
html.bobby-ui-1012 .c-now-grid > .c-now-managed-item-v1012 {
  min-width: 0;
}
html.bobby-ui-1012 .c-now-grid > .c-now-managed-item-v1012.is-without-image-v1012 {
  padding-top: clamp(22px, 3vw, 42px);
}
html.bobby-ui-1012 .c-ticker > .c-like-managed-item-v1012 {
  width: 100%;
}


/* ========================================================================
   V10.0.13 C POST INTERACTION + MOBILE MEDIA
   Only managed C entries are isolated here. Fixed C content and all A/B UI
   remain untouched.
   ======================================================================== */
html.bobby-ui-1013 .c-now-grid > .c-now-managed-item-v1013 {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 285px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  touch-action: manipulation !important;
}
html.bobby-ui-1013 .c-now-managed-media-v1013 {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 16 / 8 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--paper) 82%, var(--c) 18%) !important;
  border-bottom: 1px solid rgba(21,21,21,.22) !important;
}
html.bobby-ui-1013 .c-now-managed-media-v1013 > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}
html.bobby-ui-1013 .c-now-managed-copy-v1013 {
  box-sizing: border-box !important;
  min-width: 0 !important;
  padding: 24px 28px 26px !important;
  display: flex !important;
  flex-direction: column !important;
}
html.bobby-ui-1013 .c-now-managed-copy-v1013 > h3 {
  margin: 20px 0 16px !important;
}
html.bobby-ui-1013 .c-now-managed-copy-v1013 > p { margin: 0 !important; }
html.bobby-ui-1013 .c-now-managed-copy-v1013 > i {
  margin-top: auto !important;
  padding-top: 22px !important;
}
html.bobby-ui-1013 .c-now-grid > .c-now-managed-item-v1013.is-wide-v1013 {
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}
html.bobby-ui-1013 .c-now-managed-item-v1013.is-wide-v1013 .c-now-managed-media-v1013 {
  height: 100% !important;
  min-height: 320px !important;
  aspect-ratio: auto !important;
  border-right: 1px solid rgba(21,21,21,.22) !important;
  border-bottom: 0 !important;
}
html.bobby-ui-1013 .c-ticker > .c-like-managed-item-v1013 {
  width: 100% !important;
  touch-action: manipulation !important;
}
@media (max-width: 600px) {
  html.bobby-ui-1013 .c-now-grid > .c-now-managed-item-v1013,
  html.bobby-ui-1013 .c-now-grid > .c-now-managed-item-v1013.is-wide-v1013 {
    grid-column: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 0 !important;
  }
  html.bobby-ui-1013 .c-now-managed-media-v1013,
  html.bobby-ui-1013 .c-now-managed-item-v1013.is-wide-v1013 .c-now-managed-media-v1013 {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(21,21,21,.22) !important;
  }
  html.bobby-ui-1013 .c-now-managed-media-v1013 > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  html.bobby-ui-1013 .c-now-managed-copy-v1013 { padding: 20px 22px 23px !important; }
}

/* ========================================================================
   V10.0.14 C EMBEDDED POST SCALE + SCHEDULING VISIBILITY
   Managed C posts reuse the native C card geometry. Only their preview image
   is contained inside the existing fixed media frame so the card remains
   compact while the detail drawer keeps the full original image.
   ======================================================================== */
html.bobby-ui-1014 .c-now-grid > .c-now-managed-item-v1014 {
  min-width: 0 !important;
  min-height: 285px !important;
  overflow: hidden !important;
  touch-action: manipulation !important;
}
html.bobby-ui-1014 .c-now-grid > .c-now-managed-item-v1014.is-without-image-v1014 {
  padding-top: clamp(24px, 3vw, 38px) !important;
}
html.bobby-ui-1014 .c-now-managed-image-v1014 {
  object-fit: contain !important;
  object-position: center !important;
  background: color-mix(in srgb, var(--paper) 84%, var(--c) 16%) !important;
}
html.bobby-ui-1014 .c-now-grid > .c-now-managed-item-v1014 > small {
  line-height: 1.55 !important;
}
html.bobby-ui-1014 .c-ticker > .c-like-managed-item-v1014 {
  width: 100% !important;
  touch-action: manipulation !important;
}
@media (max-width: 600px) {
  html.bobby-ui-1014 .c-now-grid > .c-now-managed-item-v1014 {
    min-height: 230px !important;
  }
  html.bobby-ui-1014 .c-now-managed-image-v1014 {
    aspect-ratio: 16 / 9 !important;
  }
}

/* ========================================================================
   V10.0.15 ORIGINAL-PRESERVATION FIXES
   Verified runtime repairs only. The original V10 composition, typography,
   media crop, colour and hierarchy remain unchanged.
   ======================================================================== */
html.original-drawer-open,
body.original-drawer-open,
html.original-detail-open { overflow: hidden !important; overscroll-behavior: none !important; }

/* Remove the accidental flexible spacer inside Side A's original drawer. */
html.bobby-ui-1015 .drawer-a > aside {
  display: grid !important;
  grid-template-rows: auto auto auto auto auto !important;
  align-content: start !important;
}
html.bobby-ui-1015 .drawer-a > aside > .social-card-top,
html.bobby-ui-1015 .drawer-a > aside > .social-card-title,
html.bobby-ui-1015 .drawer-a > aside > .social-a-layout,
html.bobby-ui-1015 .drawer-a > aside > .qr-block,
html.bobby-ui-1015 .drawer-a > aside > .social-card-foot {
  align-self: auto !important;
  min-height: 0 !important;
}
html.bobby-ui-1015 .drawer-a > aside > .qr-block {
  margin-top: clamp(14px, 2.2vh, 24px) !important;
  padding-top: clamp(14px, 2vh, 22px) !important;
}
html.bobby-ui-1015 .drawer-a > aside > .social-card-foot {
  margin-top: 14px !important;
  padding-top: 12px !important;
}

/* ========================================================================
   V10.0.24 A/B DRAWER COMPONENT — ADAPTIVE SHARED STAGE
   One shared shell; natural media ratios. The content stage height is measured
   in JS from the real CMS copy and loaded media, then shared by A and B.
   Empty space, when a viewport is taller than the content, lives after the
   footer rather than below a portrait or between media and QR.
   ======================================================================== */
html.bobby-ui-1022 .social-drawer.drawer-a,
html.bobby-ui-1022 .social-drawer.drawer-b {
  justify-content: flex-end !important;
  align-items: stretch !important;
  overscroll-behavior: contain !important;
}

html.bobby-ui-1022 .social-drawer.drawer-measuring-v1022 {
  display: flex !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: fixed !important;
  inset: 0 auto auto -200vw !important;
  width: 455px !important;
  height: 100dvh !important;
  opacity: 0 !important;
}
html.bobby-ui-1022 .social-drawer.drawer-a > aside,
html.bobby-ui-1022 .social-drawer.drawer-b > aside {
  box-sizing: border-box !important;
  width: min(455px, 92vw) !important;
  max-width: 455px !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 30px 32px 25px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  grid-template: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: -30px 0 70px rgba(0,0,0,.32) !important;
  scrollbar-gutter: stable !important;
}
@supports not (height: 100dvh) {
  html.bobby-ui-1022 .social-drawer.drawer-a > aside,
  html.bobby-ui-1022 .social-drawer.drawer-b > aside {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }
}
html.bobby-ui-1022 .social-drawer > aside > .social-card-top {
  grid-row: auto !important;
  flex: 0 0 auto !important;
}
html.bobby-ui-1022 .social-drawer > aside > .social-card-title {
  grid-row: auto !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  min-height: 110px !important;
  padding: 0 !important;
  flex: none !important;
}
html.bobby-ui-1022 .social-content-stage-v1022 {
  grid-row: auto !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 20px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  row-gap: 18px !important;
  overflow: visible !important;
}
html.bobby-ui-1022 .social-content-stage-v1022 .social-account {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 24px 0 0 !important;
  display: block !important;
}
html.bobby-ui-1022 .social-content-stage-v1022 .social-account > p {
  margin: 0 0 11px !important;
  font-size: 8px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
}
html.bobby-ui-1022 .social-content-stage-v1022 .social-account > h2 {
  margin: 0 !important;
  font-family: Arial Narrow, Impact, "Noto Sans SC", sans-serif !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}
html.bobby-ui-1022 .social-content-stage-v1022 .social-account > span {
  display: block !important;
  margin-top: 9px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  letter-spacing: .1em !important;
  opacity: .55 !important;
}
html.bobby-ui-1022 .drawer-b .social-account > small,
html.bobby-ui-1022 .drawer-a .social-a-copy-v1022 > small {
  display: block !important;
  margin: 17px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  letter-spacing: .07em !important;
}
html.bobby-ui-1022 .drawer-b .social-account > small > span,
html.bobby-ui-1022 .drawer-a .social-a-copy-v1022 > small > span { display: block !important; }
html.bobby-ui-1022 .drawer-b .social-account > small > em,
html.bobby-ui-1022 .drawer-a .social-a-copy-v1022 > small > em {
  display: block !important;
  margin-top: 7px !important;
  font-size: 7px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  letter-spacing: .15em !important;
  opacity: .55 !important;
}
html.bobby-ui-1022 .drawer-a .social-a-story-v1022 {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .72fr) minmax(190px, 1.28fr) !important;
  align-items: start !important;
  gap: 18px !important;
  overflow: visible !important;
}
html.bobby-ui-1022 .drawer-a .social-a-copy-v1022 {
  box-sizing: border-box !important;
  min-width: 0 !important;
  align-self: start !important;
  padding-top: 2px !important;
}
html.bobby-ui-1022 .drawer-a .social-a-copy-v1022 > small { margin-top: 0 !important; }
html.bobby-ui-1022 .drawer-a .social-a-portrait {
  box-sizing: border-box !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 7px !important;
  aspect-ratio: auto !important;
  align-self: start !important;
  overflow: hidden !important;
  background: var(--paper) !important;
  box-shadow: 0 18px 34px rgba(21,21,21,.16) !important;
}
html.bobby-ui-1022 .drawer-a .social-a-portrait > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  background: transparent !important;
}
html.bobby-ui-1022 .drawer-a .social-a-portrait > figcaption,
html.bobby-ui-1022 .drawer-b .social-photo-reveal > em {
  position: absolute !important;
  z-index: 3 !important;
  right: 13px !important;
  bottom: 13px !important;
  max-width: calc(100% - 26px) !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  color: #f3efe7 !important;
  background: rgba(21,21,21,.82) !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  letter-spacing: .12em !important;
  font-style: normal !important;
}
html.bobby-ui-1022 .drawer-b .social-photo-reveal {
  box-sizing: border-box !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 7px !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: var(--paper) !important;
  box-shadow: 0 18px 34px rgba(21,21,21,.16) !important;
}
html.bobby-ui-1022 .drawer-b .social-photo-reveal > .about-real,
html.bobby-ui-1022 .drawer-b .social-photo-reveal > .about-sketch,
html.bobby-ui-1022 .drawer-b .social-photo-reveal > .about-sketch > img {
  width: 100% !important;
  height: 100% !important;
}
html.bobby-ui-1022 .drawer-b .social-photo-reveal img { object-fit: cover !important; }
html.bobby-ui-1022 .drawer-a > aside > .qr-block,
html.bobby-ui-1022 .drawer-b > aside > .qr-block {
  grid-row: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 21px 0 !important;
  align-self: start !important;
  border-top: 1px solid rgba(21,21,21,.24) !important;
}
html.bobby-ui-1022 .drawer-a > aside > .social-card-foot,
html.bobby-ui-1022 .drawer-b > aside > .social-card-foot {
  grid-row: auto !important;
  flex: 0 0 auto !important;
  margin: 17px 0 0 !important;
  padding-top: 14px !important;
  align-self: start !important;
}
@media (max-width: 600px) {
  html.bobby-ui-1022 .social-drawer.drawer-measuring-v1022 { width: 100vw !important; }
  html.bobby-ui-1022 .social-drawer.drawer-a > aside,
  html.bobby-ui-1022 .social-drawer.drawer-b > aside {
    width: calc(100% - 14px) !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 26px 22px 20px !important;
  }
  html.bobby-ui-1022 .social-drawer > aside > .social-card-title { min-height: 90px !important; }
  html.bobby-ui-1022 .social-content-stage-v1022 { row-gap: 14px !important; padding-bottom: 14px !important; }
  html.bobby-ui-1022 .social-content-stage-v1022 .social-account { padding-top: 20px !important; }
  html.bobby-ui-1022 .social-content-stage-v1022 .social-account > h2 { font-size: 32px !important; }
  html.bobby-ui-1022 .drawer-a .social-a-story-v1022 {
    grid-template-columns: minmax(0, .78fr) minmax(138px, 1.22fr) !important;
    gap: 12px !important;
  }
  html.bobby-ui-1022 .drawer-a .social-a-copy-v1022 > small,
  html.bobby-ui-1022 .drawer-b .social-account > small { font-size: 10px !important; line-height: 1.55 !important; }
  html.bobby-ui-1022 .drawer-a > aside > .qr-block,
  html.bobby-ui-1022 .drawer-b > aside > .qr-block { padding: 16px 0 !important; }
}
@media (max-width: 360px), (max-height: 700px) {
  html.bobby-ui-1022 .social-content-stage-v1022 .social-account { padding-top: 14px !important; }
  html.bobby-ui-1022 .drawer-a .social-a-story-v1022 {
    grid-template-columns: minmax(0, .76fr) minmax(124px, 1.24fr) !important;
    gap: 10px !important;
  }
  html.bobby-ui-1022 .drawer-a .social-a-copy-v1022 > small,
  html.bobby-ui-1022 .drawer-b .social-account > small { font-size: 9px !important; }
}

/* ========================================================================
   V10.0.24 A/B DRAWER TITLE GEOMETRY LOCK — ORIGINAL TYPOGRAPHY PRESERVED
   No typography declaration is allowed in this block. It only gives the
   original A/B glyphs an equal cell so the heading column shares one x-axis.
   ======================================================================== */
html.bobby-ui-1023 .social-drawer.drawer-a .social-card-title,
html.bobby-ui-1023 .social-drawer.drawer-b .social-card-title {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  align-items: end !important;
}
html.bobby-ui-1023 .social-drawer.drawer-a .social-card-title > span,
html.bobby-ui-1023 .social-drawer.drawer-b .social-card-title > span {
  box-sizing: border-box !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
}
html.bobby-ui-1023 .social-drawer.drawer-a .social-card-title > div,
html.bobby-ui-1023 .social-drawer.drawer-b .social-card-title > div {
  min-width: 0 !important;
}
@media (max-width: 600px) {
  html.bobby-ui-1023 .social-drawer.drawer-a .social-card-title,
  html.bobby-ui-1023 .social-drawer.drawer-b .social-card-title {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }
  html.bobby-ui-1023 .social-drawer.drawer-a .social-card-title > span,
  html.bobby-ui-1023 .social-drawer.drawer-b .social-card-title > span {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }
}

/* V10.0.24 — C 面统一卡片契约：不改全站字体，只统一卡片交互、媒体框和详情入口。 */
html.bobby-ui-1024 .c-now-grid > button,
html.bobby-ui-1024 .c-now-grid > .c-now-unified-card-v1024 {
  display: grid !important;
  grid-template-rows: auto auto auto 1fr auto !important;
  align-content: start !important;
  gap: 14px !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
}
html.bobby-ui-1024 .c-now-grid > button > img,
html.bobby-ui-1024 .c-now-grid > .c-now-unified-card-v1024 > img,
html.bobby-ui-1024 .c-now-managed-image-v1014,
html.bobby-ui-1024 .c-now-managed-image-v1024 {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: cover !important;
  background: rgba(21,21,21,.12) !important;
}
html.bobby-ui-1024 .c-now-grid > button > small,
html.bobby-ui-1024 .c-now-grid > .c-now-unified-card-v1024 > small { display: block !important; }
html.bobby-ui-1024 .c-now-grid > button > h3,
html.bobby-ui-1024 .c-now-grid > .c-now-unified-card-v1024 > h3 { display: grid !important; gap: 5px !important; }
html.bobby-ui-1024 .c-now-grid > button > h3 > span,
html.bobby-ui-1024 .c-now-grid > .c-now-unified-card-v1024 > h3 > span { display: block !important; }
html.bobby-ui-1024 .c-now-grid > button > h3 > em,
html.bobby-ui-1024 .c-now-grid > .c-now-unified-card-v1024 > h3 > em { display: block !important; }
html.bobby-ui-1024 .c-now-grid > button > p,
html.bobby-ui-1024 .c-now-grid > .c-now-unified-card-v1024 > p { display: grid !important; gap: 6px !important; }
html.bobby-ui-1024 .c-now-grid > button > p > span,
html.bobby-ui-1024 .c-now-grid > .c-now-unified-card-v1024 > p > span { display: block !important; }
html.bobby-ui-1024 .c-now-grid > button > p > em,
html.bobby-ui-1024 .c-now-grid > .c-now-unified-card-v1024 > p > em { display: block !important; }
html.bobby-ui-1024 .c-now-grid > button > i,
html.bobby-ui-1024 .c-now-grid > .c-now-unified-card-v1024 > i { align-self: end !important; }
html.bobby-ui-1024 .c-now-grid > button.is-without-image-v1024::before,
html.bobby-ui-1024 .c-now-grid > .is-without-image-v1024::before {
  content: "NO IMAGE / TEXT NOTE";
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  width: 100%;
  border: 1px solid rgba(21,21,21,.14);
  color: rgba(21,21,21,.45);
}
/* V10.0.24 — 管理后台媒体库：用途与尺寸提示。 */
.admin-media-usage,
.admin-media-fit,
.admin-media-purpose {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.admin-media-fit.is-warning { color: #c78924; }
.admin-media-fit.is-good { color: #8fc17c; }
.admin-content-recommendation {
  border: 1px dashed var(--line);
  padding: 12px;
  color: var(--muted);
}
.admin-content-recommendation b { color: var(--paper); }

/* ========================================================================
   V10.4.1 HOTFIX — HOME / C / MEDIA CONTRACT
   This block preserves the Classic typography and only assigns explicit
   ownership to the four fixed C cards, HOME composition and media session.
   ======================================================================== */
html.bobby-ui-1024 .c-now-grid > [data-c-fixed-key] {
  position: relative !important;
}
html.bobby-ui-1024 .c-now-grid[data-c-fixed-registry="complete"] > [data-c-fixed-key] {
  outline: none !important;
}
html.bobby-ui-1024 .c-now-grid > [data-c-fixed-key]:focus-visible {
  box-shadow: 0 0 0 3px rgba(49,90,158,.28) !important;
}

/* Always paint the paper shell before JavaScript or media is ready. */
html, body, #root { min-height: 100%; background-color: var(--paper, #d8d3ca); }
body { min-width: 320px; }

/* HOME eyebrow has two semantic lines on mobile, while desktop keeps one row. */
.home-eyebrow-primary,
.home-eyebrow-secondary,
.entrance-subtitle-primary,
.entrance-subtitle-secondary { display: inline; }
.home-eyebrow-secondary::before,
.entrance-subtitle-secondary::before { content: " / "; }

/* Desktop HOME returns to the Classic first-screen composition. The video is
   a separate editorial module below the hero, so it never competes with the
   lower-right A/B/C sculpture or its hit targets. */
@media (min-width: 601px) {
  .side-neutral .mobile-video-slot.home-video-editorial-v1041.has-media {
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    width: min(920px, calc(100% - 84px)) !important;
    margin: 34px auto 82px !important;
    padding: 18px !important;
    border: 1px solid rgba(21,21,21,.32) !important;
    background: rgba(238,233,223,.22) !important;
  }
  .side-neutral .mobile-video-slot.home-video-editorial-v1041 .moving-video-frame {
    aspect-ratio: 16 / 9 !important;
    max-height: min(68vh, 720px) !important;
  }
}

@media (min-width: 901px) {
  .side-neutral .hero {
    min-height: calc(100svh - 98px) !important;
    height: auto !important;
    overflow: hidden !important;
    align-items: center !important;
  }
  .side-neutral .hero-copy {
    align-self: auto !important;
    max-width: none !important;
    padding-bottom: 8px !important;
  }
  .side-neutral .object {
    right: 5.5vw !important;
    bottom: 26px !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .side-neutral .landing-side-selector {
    width: min(650px, 100%) !important;
    margin-top: 26px !important;
  }
  .side-neutral h1 { font-size: clamp(72px, 7.3vw, 116px) !important; }
}

@media (max-width: 600px) {
  .side-neutral .hero {
    min-height: 100svh !important;
    height: auto !important;
    padding-top: 30px !important;
  }
  .side-neutral .hero-copy {
    position: relative !important;
    z-index: 10 !important;
    padding-bottom: 112px !important;
  }
  [data-home-eyebrow="true"] {
    display: grid !important;
    justify-items: start !important;
    gap: 4px !important;
    margin-bottom: 20px !important;
    line-height: 1.25 !important;
  }
  .home-eyebrow-primary,
  .home-eyebrow-secondary {
    display: block !important;
  }
  .home-eyebrow-secondary::before,
  .entrance-subtitle-secondary::before { content: "" !important; }
  [data-entrance-subtitle="true"] {
    display: grid !important;
    justify-items: start !important;
    gap: 2px !important;
    line-height: 1.25 !important;
  }
  .entrance-subtitle-primary,
  .entrance-subtitle-secondary { display: block !important; }
  [data-entrance-heading="true"].entrance-heading-composed,
  .entrance-copy > h2.entrance-heading-composed {
    width: min(86vw, 340px) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
  }
  [data-home-intro="true"].home-intro-composed {
    width: min(88%, 370px) !important;
    max-width: 370px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
  }
  [data-home-intro="true"].home-intro-composed b,
  [data-home-intro="true"].home-intro-composed span {
    display: inline !important;
  }
  .side-neutral .mobile-video-slot.home-video-editorial-v1041.has-media {
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    width: calc(100% - 36px) !important;
    margin: 20px 18px 48px !important;
    padding: 13px !important;
    border: 1px solid rgba(21,21,21,.32) !important;
    background: rgba(238,233,223,.22) !important;
  }
  .side-neutral .mobile-video-slot.home-video-editorial-v1041 .moving-video-frame {
    aspect-ratio: 16 / 9 !important;
  }
}

/* ========================================================================
   V10.5.0 RUNTIME & MEDIA STABILITY
   One owner for navigation/audio; HOME video remains integrated on mobile.
   ======================================================================== */
.moving-video-frame video {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}
.moving-video-frame .moving-video-placeholder {
  z-index: 1 !important;
  pointer-events: none !important;
}
@media (min-width: 601px) {
  .side-neutral .mobile-video-slot.home-video-editorial-v1050.has-media {
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    width: min(920px, calc(100% - 84px)) !important;
    margin: 34px auto 82px !important;
    padding: 18px !important;
    border: 1px solid rgba(21,21,21,.32) !important;
    background: rgba(238,233,223,.22) !important;
  }
  .side-neutral .mobile-video-slot.home-video-editorial-v1050 .moving-video-frame {
    aspect-ratio: 16 / 9 !important;
    max-height: min(68vh, 720px) !important;
  }
}
@media (max-width: 600px) {
  .side-neutral .hero {
    min-height: 100svh !important;
    height: auto !important;
    overflow: visible !important;
  }
  .side-neutral .hero-copy {
    padding-bottom: 96px !important;
  }
  .side-neutral .hero-copy > .mobile-video-slot.home-video-editorial-v1050.has-media {
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    inset: auto !important;
    z-index: 12 !important;
    width: 100% !important;
    margin: 26px 0 24px !important;
    padding: 10px !important;
    border: 1px solid rgba(21,21,21,.32) !important;
    background: rgba(238,233,223,.28) !important;
  }
  .side-neutral .hero-copy > .mobile-video-slot.home-video-editorial-v1050 .moving-video-head {
    margin-bottom: 7px !important;
  }
  .side-neutral .hero-copy > .mobile-video-slot.home-video-editorial-v1050 .moving-video-frame {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
  }
  .side-neutral .hero-copy > .mobile-video-slot.home-video-editorial-v1050 video {
    object-fit: contain !important;
  }
}


/* V10.5.2 interaction stability: explicit video sound control and mobile entrance geometry. */
.moving-video-head { align-items: center !important; justify-content: space-between !important; gap: 14px !important; }
.moving-video-sound-toggle {
  flex: none; border: 1px solid rgba(21,21,21,.42); background: transparent; color: inherit;
  padding: 7px 10px; font: 800 8px/1.2 Arial,sans-serif; letter-spacing: .08em; cursor: pointer;
}
.moving-video-sound-toggle[aria-pressed="true"] { background: #151515; color: #eee9df; }
@media (max-width:600px) {
  .entrance { display:flex !important; justify-content:space-between !important; align-items:stretch !important; }
  .entrance-top { width:100% !important; display:grid !important; grid-template-columns:auto minmax(0,1fr) !important; align-items:start !important; gap:18px !important; }
  [data-entrance-subtitle="true"], .entrance-top > span { display:grid !important; justify-items:end !important; text-align:right !important; gap:3px !important; font-size:8px !important; line-height:1.25 !important; letter-spacing:.16em !important; }
  .entrance-top > span .entrance-subtitle-primary,
  .entrance-top > span .entrance-subtitle-secondary { display:block !important; white-space:nowrap !important; }
  .entrance-copy { width:100% !important; max-width:390px !important; margin:auto !important; text-align:left !important; }
  .entrance-copy > p { font-size:12px !important; }
  [data-entrance-heading="true"].entrance-heading-composed,
  .entrance-copy > h2.entrance-heading-composed {
    width:100% !important; max-width:none !important; margin:18px 0 34px !important;
    font-size:clamp(46px,13vw,64px) !important; line-height:1.02 !important; text-align:left !important;
  }
  .entrance-actions { width:100% !important; display:grid !important; grid-template-columns:1fr !important; gap:10px !important; }
  .entrance-actions button,
  .entrance-actions button:first-child {
    width:100% !important; min-width:0 !important; min-height:58px !important; display:flex !important;
    position:relative !important; align-items:center !important; justify-content:center !important; text-align:center !important; gap:12px !important;
  }
  .entrance-actions button:first-child > span { position:absolute !important; right:20px !important; }
  .entrance-note { position:static !important; margin:22px 0 0 !important; }
  .moving-video-head { flex-wrap:wrap !important; }
  .moving-video-sound-toggle { margin-left:auto !important; }
}

/* ========================================================================
   V10.5.3 UNIFIED VIDEO PLAYER
   One custom control contract for HOME and Side A/B/C. Browser-native controls
   are not used because their hit targets and audio behavior diverge across
   Chrome, Safari, Edge and embedded WebViews.
   ======================================================================== */
.unified-video-module-v1053,
.side-video-block-v9.unified-video-module-v1053,
.mobile-video-slot.unified-video-module-v1053 {
  box-sizing: border-box !important;
  width: min(920px, calc(100% - 84px)) !important;
  margin: 34px auto 76px !important;
  padding: 16px !important;
  border: 1px solid rgba(21,21,21,.34) !important;
  background: rgba(238,233,223,.24) !important;
}
.side-video-block-v9.unified-video-module-v1053.has-media > .moving-video-head,
.unified-video-module-v1053 > .moving-video-head {
  display: flex !important;
  margin: 0 0 10px !important;
}
.unified-video-module-v1053 .moving-video-frame {
  position: relative !important;
  display: grid !important;
  grid-template-rows: minmax(0, auto) auto !important;
  width: 100% !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(21,21,21,.44) !important;
  background: #151515 !important;
  isolation: isolate !important;
}
.unified-video-module-v1053 .moving-video-frame > video {
  position: relative !important;
  z-index: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #151515 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
.unified-video-module-v1053 .moving-video-placeholder {
  z-index: 2 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 50px !important;
  left: 0 !important;
  pointer-events: auto !important;
}
.unified-video-module-v1053.has-poster .moving-video-placeholder,
.unified-video-module-v1053.is-frame-ready .moving-video-placeholder,
.unified-video-module-v1053 .moving-video-placeholder[hidden] {
  display: none !important;
}
.moving-video-controls-v1053 {
  position: relative !important;
  z-index: 4 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(100px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 50px !important;
  padding: 8px 10px !important;
  border-top: 1px solid rgba(238,233,223,.22) !important;
  background: #151515 !important;
  color: #eee9df !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
.moving-video-controls-v1053 button {
  min-width: 72px !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(238,233,223,.45) !important;
  background: transparent !important;
  color: inherit !important;
  font: 800 10px/1 Arial,sans-serif !important;
  letter-spacing: .08em !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.moving-video-controls-v1053 button:hover,
.moving-video-controls-v1053 button:focus-visible {
  background: #eee9df !important;
  color: #151515 !important;
  outline: 0 !important;
}
.moving-video-controls-v1053 time {
  min-width: 86px !important;
  font: 700 10px/1 Arial,sans-serif !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
}
.moving-video-controls-v1053 input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  margin: 0 !important;
  accent-color: #eee9df !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.moving-video-controls-v1053 input[type="range"]:disabled {
  opacity: .35 !important;
  cursor: not-allowed !important;
}
@media (max-width: 720px) {
  .unified-video-module-v1053,
  .side-video-block-v9.unified-video-module-v1053,
  .mobile-video-slot.unified-video-module-v1053,
  .side-neutral .hero-copy > .mobile-video-slot.home-video-editorial-v1050.unified-video-module-v1053.has-media {
    width: calc(100% - 36px) !important;
    margin: 24px 18px 48px !important;
    padding: 10px !important;
  }
  .side-neutral .hero-copy > .mobile-video-slot.home-video-editorial-v1050.unified-video-module-v1053.has-media {
    width: 100% !important;
    margin: 24px 0 28px !important;
  }
  .moving-video-controls-v1053 {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    min-height: 96px !important;
    padding: 9px !important;
  }
  .moving-video-controls-v1053 time {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  .moving-video-controls-v1053 input[type="range"] {
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
  }
  .moving-video-controls-v1053 button {
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 8px 5px !important;
    font-size: 9px !important;
  }
  .unified-video-module-v1053 .moving-video-placeholder { bottom: 96px !important; }
}

/* V10.5.3 geometry lock: the frame includes the control row, therefore the
   16:9 ratio belongs to the video element—not to the combined frame. This
   higher-specificity HOME override prevents legacy V10.5.0 rules from
   compressing the HOME picture to make picture + controls fit inside 16:9. */
.side-neutral .mobile-video-slot.home-video-editorial-v1050.unified-video-module-v1053 .moving-video-frame,
.side-neutral .hero-copy > .mobile-video-slot.home-video-editorial-v1050.unified-video-module-v1053 .moving-video-frame,
.side-video-block-v9.unified-video-module-v1053 .moving-video-frame {
  aspect-ratio: auto !important;
  max-height: none !important;
}

/* V10.5.4 targeted stability lock: no composition redesign. */
:root { --ui-motion-time: 180ms !important; }
.site .hero-copy,
.site .a-portrait,
.site .b-photo-reveal,
.site .c-hero-visual,
.site .side-switcher-ui {
  transition-duration: 180ms !important;
}
.site.ui-side-switching .hero-copy,
.site.ui-side-switching .a-portrait,
.site.ui-side-switching .b-photo-reveal,
.site.ui-side-switching .c-hero-visual {
  opacity: .82 !important;
  transform: none !important;
}
/* HOME controls are a stable sibling row, never covered by the video or Poster. */
.side-neutral .mobile-video-slot.unified-video-module-v1053 .moving-video-controls-v1053 {
  position: relative !important;
  z-index: 20 !important;
  isolation: isolate !important;
  pointer-events: auto !important;
}
.side-neutral .mobile-video-slot.unified-video-module-v1053 .moving-video-frame > video,
.side-neutral .mobile-video-slot.unified-video-module-v1053 .moving-video-placeholder {
  grid-row: 1 !important;
}
/* Restore the approved C intro: copy at left, moving image + supporting copy at right. */
.c-intro.c-intro-layout-unified.has-video-unified .c-intro-support-unified {
  min-height: 0 !important;
}
.c-intro.c-intro-layout-unified.has-video-unified .c-intro-support-unified .side-video-c {
  width: 100% !important;
  margin: 0 !important;
}

/* V10.5.7 integrated stability lock.
   This block is intentionally narrow: trusted media interaction, the approved
   C composition, and C hero alignment. It does not redesign A/B or HOME. */
.unified-video-module-v1053,
.unified-video-module-v1053 .moving-video-frame,
.unified-video-module-v1053 .moving-video-controls-v1053 {
  isolation: isolate !important;
}
.unified-video-module-v1053 .moving-video-controls-v1053,
.unified-video-module-v1053 .moving-video-controls-v1053 *,
.unified-video-module-v1053 .moving-video-placeholder {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
.unified-video-module-v1053 .moving-video-controls-v1053 input[type="range"] {
  touch-action: pan-x !important;
}
.unified-video-module-v1053 .moving-video-controls-v1053 button,
.footer-contact-v9 {
  cursor: pointer !important;
}

/* C landing page follows the same top-to-bottom hero rhythm as A/B while the
   turn control remains on the common baseline. */
.site.side-c .hero-copy {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
.site.side-c .hero-copy > .turn {
  margin-top: auto !important;
}

/* Final approved C chapter ownership:
   LEFT: section, Chinese title, English line.
   RIGHT: moving image, Chinese supporting copy, English supporting copy. */
.site .c-intro.c-intro-layout-locked.c-intro-final-1057 {
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr) !important;
  align-items: start !important;
  column-gap: clamp(48px, 5vw, 84px) !important;
  row-gap: 0 !important;
  min-height: 0 !important;
}
.site .c-intro-final-1057 > .c-intro-copy-locked {
  display: flex !important;
  flex-direction: column !important;
  align-self: start !important;
  min-width: 0 !important;
}
.site .c-intro-final-1057 > .c-intro-copy-locked > .section-no {
  margin: 0 0 clamp(34px, 4.2vh, 58px) !important;
}
.site .c-intro-final-1057 > .c-intro-copy-locked > h2 {
  align-self: auto !important;
  max-width: 690px !important;
  margin: 0 0 clamp(26px, 3vh, 42px) !important;
  font-family: Arial Narrow, Impact, "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC", sans-serif !important;
}
.site .c-intro-final-1057 .c-intro-tagline-locked {
  display: block !important;
  align-self: auto !important;
  max-width: 650px !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}
.site .c-intro-final-1057 > .c-intro-support-locked {
  display: flex !important;
  flex-direction: column !important;
  align-self: start !important;
  gap: 20px !important;
  min-width: 0 !important;
}
.site .c-intro-final-1057 .side-video-c {
  width: 100% !important;
  margin: 0 !important;
}
.site .c-intro-final-1057 .c-intro-caption-locked {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
}
.site .c-intro-final-1057 .c-intro-caption-locked > p {
  margin: 0 !important;
}

@media (max-width: 600px) {
  .site .c-intro.c-intro-layout-locked.c-intro-final-1057 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .site .c-intro-final-1057 > .c-intro-copy-locked > .section-no {
    margin: 0 0 16px !important;
  }
  .site .c-intro-final-1057 > .c-intro-copy-locked > h2 {
    order: 1 !important;
    margin: 0 0 18px !important;
  }
  .site .c-intro-final-1057 .c-intro-tagline-locked {
    order: 2 !important;
    margin: 0 !important;
  }
  .site .c-intro-final-1057 > .c-intro-support-locked {
    gap: 18px !important;
  }
}

/* V10.5.7 native contact navigation: a real URL is the source of truth, so
   footer contact still works if the React transition layer consumes clicks. */
.footer-contact-v9 { display: flex !important; align-items: flex-end !important; gap: 35px !important; }
.footer-contact-native-v1057 {
  position: absolute !important;
  inset: -12px !important;
  z-index: 12 !important;
  display: block !important;
  border: 0 !important;
  cursor: pointer !important;
}
.footer-contact-native-v1057:focus-visible {
  outline: 1px solid currentColor !important;
  outline-offset: 4px !important;
}
@media (max-width: 600px) {
  .footer-contact-v9 { gap: 19px !important; }
}