/* Homepage hero "那些没说出口的" (approved 2026-10-05): a typed line is deleted, its characters
   burst into particles, gather into a rippling sphere and stream out into two weaving strands.
   Scoped to #observatory-hero.unsaid-hero so it overrides the older lab-home / cosmic layers. */

/* ---------- top navigation: brand · glass pill · mini-program button ---------- */
body[data-lab-version="4"] .topbar.shell { display: flex !important; align-items: center; gap: 24px; height: 76px; min-height: 0; padding: 0 clamp(16px, 4vw, 56px);
  background: rgba(3, 4, 12, .82); border-bottom: 1px solid rgba(196, 204, 255, .08); }
body[data-lab-version="4"] .topbar > .brand { display: flex; align-items: center; gap: 12px; font: 600 22px var(--serif); white-space: nowrap; }
body[data-lab-version="4"] .topbar > .brand b { font: 500 11px var(--mono, ui-monospace, monospace); letter-spacing: .16em; color: #a7afd2; padding: 3px 7px; border: 1px solid rgba(196, 204, 255, .16); border-radius: 6px; }
body[data-lab-version="4"] .topbar > p,
body[data-lab-version="4"] .topbar > .lab-nav,
body[data-lab-version="4"] .topbar > .product-deck,
body[data-lab-version="4"] .topbar .lab-credit,
body[data-lab-version="4"] .topbar .lab-login { display: none !important; }
.site-nav { display: flex; gap: 6px; margin-left: auto; padding: 5px; border: 1px solid rgba(196, 204, 255, .16); border-radius: 999px; background: rgba(14, 16, 40, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-nav > :nth-child(n+4) { display: none; }
.site-nav-item { position: relative; padding: 9px 18px; border: 0; border-radius: 999px; background: none; color: #a7afd2; font: 15px/1.2 var(--sans); white-space: nowrap; cursor: pointer; transition: color .3s, background .3s; }
.site-nav-item:hover, .site-nav-item:focus-visible { color: #f4f2ff; }
.site-nav-item.is-active { color: #fff; background: linear-gradient(120deg, rgba(255, 150, 150, .22), rgba(165, 150, 255, .22)); box-shadow: inset 0 0 0 1px rgba(220, 210, 255, .22); }
body[data-lab-version="4"] .topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: 18px; }
.site-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-size: 14px; color: #f4f2ff; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(255, 190, 180, .45); background: rgba(255, 150, 140, .1); transition: background .3s; }
.site-cta:hover { background: rgba(255, 150, 140, .2); }
.site-cta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7ee2b8; box-shadow: 0 0 10px #7ee2b8; }
body[data-lab-version="4"] .topbar .nav-more-button { height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(196, 204, 255, .16); background: rgba(14, 16, 40, .5); color: #a7afd2; }
.site-nav-tip { position: fixed; z-index: 60; padding: 8px 14px; border-radius: 10px; font-size: 13px; color: #f4f2ff; white-space: nowrap; pointer-events: none;
  background: rgba(18, 20, 48, .92); border: 1px solid rgba(196, 204, 255, .22); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transform: translateX(-50%); animation: siteTip 2.2s ease forwards; }
@keyframes siteTip { 0% { opacity: 0; margin-top: -4px; } 12%, 80% { opacity: 1; margin-top: 0; } 100% { opacity: 0; } }
@media (max-width: 1100px) { .site-nav-item { padding: 8px 12px; font-size: 14px; } body[data-lab-version="4"] .topbar.shell { gap: 14px; } body[data-lab-version="4"] .topbar-actions { margin-left: 8px; } }
@media (max-width: 800px) {
  body[data-lab-version="4"] .topbar.shell { flex-wrap: wrap; height: auto; padding: 10px 14px 8px; row-gap: 8px; }
  body[data-lab-version="4"] .topbar > .brand { font-size: 19px; }
  body[data-lab-version="4"] .topbar-actions { margin-left: auto; gap: 8px; }
  .site-cta { padding: 8px 13px; font-size: 13px; }
  body[data-lab-version="4"] .topbar .nav-more-button { height: 34px; padding: 0 11px; }
  .site-nav { order: 3; width: 100%; margin: 0; gap: 2px; padding: 4px; justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
  .site-nav-item { padding: 7px 6px; font-size: 12.5px; flex: 1 1 auto; }
}

/* ---------- hero frame ---------- */
body[data-lab-version="4"] #observatory-hero.unsaid-hero {
  --uh-coral: #ff9a9a; --uh-violet: #a596ff; --uh-gold: #ffdca0; --uh-ink: #f4f2ff; --uh-dim: #a7afd2; --uh-line: rgba(196, 204, 255, .16);
  position: relative; isolation: isolate; display: flex; align-items: center; width: 100%; max-width: none; margin: 0;
  min-height: max(640px, calc(100svh - 77px)); padding: 48px clamp(16px, 6vw, 110px) 150px; overflow: hidden;
  background: radial-gradient(60% 70% at 64% 48%, rgba(46, 36, 110, .36), transparent 70%), radial-gradient(90% 80% at 60% 20%, #080b22, #020309 72%);
  border-bottom: 0;
}
#observatory-hero.unsaid-hero::before, #observatory-hero.unsaid-hero::after { display: none; }
#observatory-hero.unsaid-hero > .legacy-hero[hidden] { display: none !important; }
.uh-layer { position: absolute; inset: 0; pointer-events: none; }
.uh-nebula { z-index: 0; overflow: hidden; mix-blend-mode: screen; }
.uh-nebula i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .34; will-change: transform; }
.uh-nebula i:nth-child(1) { width: 56vmax; height: 40vmax; left: 40%; top: 4%; background: radial-gradient(closest-side, rgba(110, 80, 240, .5), transparent); animation: uhCloudA 60s ease-in-out infinite alternate; }
.uh-nebula i:nth-child(2) { width: 40vmax; height: 34vmax; left: 60%; top: 40%; background: radial-gradient(closest-side, rgba(255, 120, 150, .24), transparent); animation: uhCloudB 70s ease-in-out infinite alternate; }
.uh-nebula i:nth-child(3) { width: 50vmax; height: 30vmax; left: -14%; top: 58%; background: radial-gradient(closest-side, rgba(60, 110, 255, .2), transparent); animation: uhCloudA 80s ease-in-out infinite alternate-reverse; }
@keyframes uhCloudA { to { transform: translate3d(-5vw, 3vh, 0) scale(1.1); } }
@keyframes uhCloudB { to { transform: translate3d(4vw, -4vh, 0) scale(.92); } }
.uh-horizon { position: absolute; z-index: 1; left: 50%; bottom: -118vmax; width: 240vmax; height: 130vmax; transform: translateX(-38%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #04050d 97.6%, transparent 100%); box-shadow: 0 -2px 0 rgba(170, 160, 255, .22), 0 -18px 60px rgba(120, 100, 255, .2), 0 -60px 140px rgba(255, 130, 140, .08);
  opacity: 0; transition: opacity 2.4s ease .6s; }
.uh-stage { z-index: 2; }
.uh-vignette { z-index: 3; background: radial-gradient(120% 90% at 62% 48%, transparent 55%, rgba(1, 2, 7, .78)); }
.uh-meteors { z-index: 3; overflow: hidden; }
.uh-meteor { position: absolute; width: 150px; height: 1px; background: linear-gradient(90deg, rgba(255, 244, 236, .8), rgba(255, 210, 195, 0)); transform-origin: left center; }

/* ---------- copy ---------- */
#observatory-hero.unsaid-hero .uh-copy { position: relative; z-index: 5; max-width: 640px; padding: 0; pointer-events: auto; }
.uh-copy > * { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity 1.4s cubic-bezier(.16,1,.3,1), transform 1.4s cubic-bezier(.16,1,.3,1), filter 1.4s; }
.unsaid-hero.is-ready .uh-copy > * { opacity: 1; transform: none; filter: none; }
.unsaid-hero.is-ready .uh-copy > :nth-child(2) { transition-delay: .15s; } .unsaid-hero.is-ready .uh-copy > :nth-child(3) { transition-delay: .45s; }
.unsaid-hero.is-ready .uh-copy > :nth-child(4) { transition-delay: .7s; } .unsaid-hero.is-ready .uh-copy > :nth-child(5) { transition-delay: .95s; } .unsaid-hero.is-ready .uh-copy > :nth-child(6) { transition-delay: 1.2s; }
#observatory-hero.unsaid-hero .uh-label { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 500 13px var(--mono, ui-monospace, monospace); letter-spacing: .26em; color: #8f99c6; }
#observatory-hero.unsaid-hero .uh-label::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--uh-coral), var(--uh-violet)); }
#observatory-hero.unsaid-hero .uh-copy h1 { margin: 18px 0 12px; max-width: 9em; font: 500 clamp(44px, 5.2vw, 68px)/1.14 var(--serif); letter-spacing: -.045em; color: #f6f4ff; }
#observatory-hero.unsaid-hero .uh-copy h1 em { font-style: normal; letter-spacing: -.1em; color: #ffb9ad; }
#observatory-hero.unsaid-hero .uh-lede { margin: 16px 0 0; max-width: 32em; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.85; color: var(--uh-dim); }
#observatory-hero.unsaid-hero .uh-mini-note { max-width: 34em; margin: 16px 0 0; padding-left: 14px; border-left: 2px solid #e6b7a8; color: #e1e3f2; font: 14px/1.85 var(--sans); }
#observatory-hero.unsaid-hero .uh-search-hint { margin: 16px 0 0; color: #a7afd2; font: 12px/1.8 var(--sans); }
#observatory-hero.unsaid-hero .hero-save-entrance { display: none; }
#observatory-hero.unsaid-hero .uh-card:nth-child(n+3) { display: none; }
#observatory-hero.unsaid-hero .uh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
#observatory-hero.unsaid-hero .uh-actions .signal-button { display: inline-flex; align-items: center; gap: 20px; min-width: 0; min-height: 0; padding: 17px 32px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font: 600 16px var(--sans); color: #1b1424; background: linear-gradient(120deg, #ffc6ba, #ff9d8e 55%, #e9a8d6); box-shadow: 0 0 0 1px rgba(255, 215, 205, .45), 0 12px 40px rgba(255, 128, 120, .32); }
#observatory-hero.unsaid-hero .uh-actions .demo-button { padding: 4px 0; font-size: 14px; color: var(--uh-ink); white-space: nowrap; background: none; border: 0; border-bottom: 1px solid rgba(220, 225, 255, .28); border-radius: 0; }
#observatory-hero.unsaid-hero .uh-trust { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
#observatory-hero.unsaid-hero .uh-trust li { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 12px; color: #c4cae6; border: 1px solid var(--uh-line); background: rgba(14, 16, 40, .4); }
#observatory-hero.unsaid-hero .uh-trust li::before { content: "✦"; font-size: 10px; color: var(--uh-gold); }
/* promotional links other scripts inject next to the actions stay out of this composition */
#observatory-hero.unsaid-hero .hero-save-entrance, #observatory-hero.unsaid-hero .local-motion-preview { display: none !important; }

/* ---------- observation frame, sample readings, steps ---------- */
.uh-hud { position: absolute; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 1.6s ease .4s; }
.uh-hud::before, .uh-hud::after, .uh-hud > i::before, .uh-hud > i::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: rgba(206, 214, 255, .4); border-style: solid; }
.uh-hud::before { left: 0; top: 0; border-width: 1px 0 0 1px; } .uh-hud::after { right: 0; top: 0; border-width: 1px 1px 0 0; }
.uh-hud > i::before { left: 0; bottom: 0; border-width: 0 0 1px 1px; } .uh-hud > i::after { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
/* a faint constellation (the same kind of star map the mini program home uses) fills the upper right of the frame, behind the sample readings */
.uh-constel { position: absolute; right: 4%; top: 13%; width: min(34%, 360px); height: auto; overflow: visible; opacity: .8; }
.uh-constel polyline { fill: none; stroke: rgba(206, 214, 255, .26); stroke-width: 1; stroke-linejoin: round; }
.uh-constel circle { fill: #e6eaff; opacity: .75; } .uh-constel circle.big { fill: #ffd9a8; opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 200, 150, .8)); }
@media (prefers-reduced-motion: no-preference) { .uh-constel circle { animation: uhTwinkle 4.5s ease-in-out infinite; } .uh-constel circle:nth-child(2n) { animation-delay: -1.6s; } .uh-constel circle:nth-child(3n) { animation-delay: -3.1s; } }
@keyframes uhTwinkle { 50% { opacity: .35; } }
.uh-hud-label { position: absolute; left: 26px; top: -5px; font: 500 10px var(--mono, ui-monospace, monospace); letter-spacing: .18em; color: rgba(206, 214, 255, .6); white-space: nowrap; }
.uh-hud-label b { color: #7ee2b8; font-weight: 500; }
.uh-axis { position: absolute; left: 0; right: 0; bottom: 14px; height: 18px; border-top: 1px solid rgba(206, 214, 255, .14); display: flex; justify-content: space-between; font: 10px var(--mono, ui-monospace, monospace); color: rgba(206, 214, 255, .45); letter-spacing: .08em; }
.uh-axis span { position: relative; padding-top: 6px; } .uh-axis span::before { content: ""; position: absolute; left: 0; top: -4px; width: 1px; height: 7px; background: rgba(206, 214, 255, .35); }
.uh-cards { z-index: 4; }
.uh-card { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 1.2s ease; will-change: transform; }
.uh-card .dot { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px currentColor; }
.uh-card .stem { position: absolute; width: 1px; background: linear-gradient(currentColor, transparent); opacity: .6; }
.uh-card .box { position: absolute; padding: 10px 13px; border-radius: 12px; background: rgba(18, 20, 48, .5); border: 1px solid var(--uh-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.uh-card small { display: flex; align-items: center; justify-content: space-between; gap: 10px; white-space: nowrap; font: 10px var(--mono, ui-monospace, monospace); letter-spacing: .1em; color: var(--uh-dim); }
.uh-card small em { font-style: normal; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .06); color: rgba(206, 214, 255, .55); }
.uh-card strong { display: block; margin-top: 5px; font: 600 15px var(--serif); color: var(--uh-ink); white-space: nowrap; }
.uh-card strong span { color: currentColor; }
.uh-card.me { color: var(--uh-coral); } .uh-card.them { color: var(--uh-violet); } .uh-card.gold { color: var(--uh-gold); }
.uh-steps { position: absolute; z-index: 6; left: clamp(16px, 6vw, 110px); right: clamp(16px, 6vw, 110px); bottom: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none;
  opacity: 0; transform: translateY(12px); transition: opacity 1.2s ease .5s, transform 1.2s cubic-bezier(.16,1,.3,1) .5s; }
.uh-steps li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--uh-line); background: rgba(12, 14, 36, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.uh-steps b { grid-row: 1 / 3; font: 500 22px var(--mono, ui-monospace, monospace); color: var(--uh-coral); }
.uh-steps li:nth-child(2) b { color: var(--uh-violet); } .uh-steps li:nth-child(3) b { color: var(--uh-gold); }
.uh-steps strong { font: 600 15px var(--serif); color: var(--uh-ink); }
.uh-steps span { font-size: 12px; color: var(--uh-dim); }
.unsaid-hero.is-ready .uh-horizon, .unsaid-hero.is-ready .uh-hud, .unsaid-hero.is-ready .uh-card { opacity: 1; }
.unsaid-hero.is-ready .uh-steps { opacity: 1; transform: none; }

/* the hero's three step cards replace the older journey rail further down */
#observatory-panel > .journey-rail { display: none; }

@media (max-width: 1100px) { .uh-card:nth-child(4) { display: none; } }
@media (max-width: 800px) {
  body[data-lab-version="4"] #observatory-hero.unsaid-hero { align-items: flex-start; min-height: max(600px, calc(100svh - 120px)); padding: 30px 16px 40px; }
  #observatory-hero.unsaid-hero .uh-copy h1 { font-size: clamp(34px, 10.2vw, 46px); }
  #observatory-hero.unsaid-hero .uh-actions { margin-top: 24px; }
  #observatory-hero.unsaid-hero .uh-actions .signal-button { padding: 14px 24px; font-size: 15px; }
  #observatory-hero.unsaid-hero .uh-trust { gap: 8px; margin-top: 20px; }
  #observatory-hero.unsaid-hero .uh-trust li { font-size: 11px; padding: 6px 10px; }
  #observatory-hero.unsaid-hero .uh-trust li:nth-child(3) { display: none; }
  .uh-steps, .uh-hud, .uh-card { display: none; }
  .uh-card .box { padding: 8px 10px; } .uh-card strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .uh-nebula i { animation: none; } .uh-copy > * { transition: none; } }

/* Performance: the upload area and the long report sit on a dark, still background, so live
   backdrop blur on every card adds scroll cost without a visible difference. */
#intake *, #analysis-stage *, #report-section * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Release ritual: confirming means holding the button for about a second */
.release-confirm-button { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.release-confirm-button b { position: relative; z-index: 1; font-weight: inherit; }
.release-hold-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255, 255, 255, .38); pointer-events: none; }
.release-confirm-button.is-holding .release-hold-fill { width: 100%; transition: width var(--hold-ms, 1100ms) linear; }
.release-hold-hint { display: block; flex-basis: 100%; margin-top: 8px; font-size: 12px; color: #a7afd2; }
.release-hold-hint[hidden] { display: none; }

/* The release scene (homepage preview and the card under a report): a few chat bubbles dissolve into
   stardust that rises and fades, and a small star is left behind. It speeds up while the button is held. */
.release-scene { position: relative; overflow: hidden; border-radius: 14px; background: radial-gradient(70% 80% at 50% 75%, rgba(70, 56, 160, .45), transparent 70%), linear-gradient(180deg, #0a0d28, #05061a) !important; }
.release-scene::before { content: ""; position: absolute; inset: 0; opacity: .6; background-image: radial-gradient(1px 1px at 12% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 70%, #ffe7b8 50%, transparent 51%), radial-gradient(1px 1px at 6% 82%, #cfd8ff 50%, transparent 51%), radial-gradient(1px 1px at 46% 90%, #fff 50%, transparent 51%); }
.report-release-orbit.release-scene > * { display: block; }
.release-scene .rs-bubble { position: absolute; height: 15%; min-height: 12px; border-radius: 999px; background: rgba(124, 112, 214, .35); border: 1px solid rgba(190, 180, 255, .45); animation: rs-bubble 8s ease-in-out infinite; }
.release-scene .rs-bubble::after { content: ""; position: absolute; left: 14%; right: 22%; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: rgba(244, 242, 255, .65); }
.release-scene .rs-a { left: 10%; top: 28%; width: 48%; border-bottom-left-radius: 4px; }
.release-scene .rs-b { right: 10%; top: 48%; width: 40%; border-bottom-right-radius: 4px; background: rgba(255, 140, 128, .28); border-color: rgba(255, 186, 172, .5); animation-delay: .15s; }
.release-scene .rs-c { left: 14%; top: 68%; width: 32%; border-bottom-left-radius: 4px; animation-delay: .3s; }
@keyframes rs-bubble { 0% { opacity: 0; transform: translateY(6px); } 8%, 30% { opacity: 1; transform: none; filter: none; } 44%, 100% { opacity: 0; transform: translateY(-8px) scale(.96); filter: blur(4px); } }
.release-scene .rs-dust { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #ffe2b8; box-shadow: 0 0 6px 1px rgba(255, 214, 160, .7); opacity: 0; animation: rs-dust 8s ease-out infinite; animation-delay: var(--d); }
@keyframes rs-dust { 0%, 30% { opacity: 0; transform: translate(0, 0) scale(1); } 36% { opacity: 1; } 72% { opacity: 0; transform: translate(var(--dx), -40px) scale(.5); } 100% { opacity: 0; } }
.release-scene .rs-star { position: absolute; left: 50%; top: 16%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #fff6e0; box-shadow: 0 0 10px 3px rgba(255, 220, 170, .8), 0 0 26px 8px rgba(255, 190, 140, .3); opacity: 0; animation: rs-star 8s ease-in-out infinite; }
.release-scene .rs-star::before, .release-scene .rs-star::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, #fff3d6, transparent); }
.release-scene .rs-star::before { width: 30px; height: 1px; }
.release-scene .rs-star::after { width: 1px; height: 38px; background: linear-gradient(180deg, transparent, #fff3d6, transparent); }
@keyframes rs-star { 0%, 50% { opacity: 0; transform: scale(.3); } 64%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }
@keyframes rs-twinkle { 50% { transform: scale(.82); opacity: .75; } }
/* Under a report: faster while held / releasing; once released only the star stays. */
.report-release-ritual.is-holding .release-scene *, .report-release-ritual.is-releasing .release-scene * { animation-duration: 3s; }
.report-release-ritual.is-released .release-scene .rs-bubble, .report-release-ritual.is-released .release-scene .rs-dust { animation: none; opacity: 0; }
.report-release-ritual.is-released .release-scene .rs-star { animation: rs-twinkle 3s ease-in-out infinite; opacity: 1; transform: none; }
.privacy-release-preview .release-visual.release-scene { height: 148px; }
@media (prefers-reduced-motion: reduce) {
  .release-scene .rs-bubble { animation: none; opacity: 1; }
  .release-scene .rs-dust { display: none; }
  .release-scene .rs-star { animation: none; opacity: 1; }
}

/* ---------- 情绪转折点 (report) ---------- */
.turning-points .block-heading h3 em { color: #ffb9ad; }
.turning-list { position: relative; list-style: none; margin: 18px 0 0; padding: 0 0 0 26px; display: grid; gap: 16px; }
.turning-list::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, rgba(255, 185, 173, .6), rgba(184, 173, 255, .4)); }
.turning-item { position: relative; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(206, 214, 255, .14); background: rgba(14, 18, 44, .55); }
.turning-item::before { content: ''; position: absolute; left: -24px; top: 22px; width: 11px; height: 11px; border-radius: 50%; background: #ffb9ad; box-shadow: 0 0 0 4px rgba(255, 185, 173, .16); }
.turning-shift { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.turning-before { color: #a7afd2; }
.turning-shift i { font-style: normal; color: #ffb9ad; }
.turning-after { color: #f4f2ff; font-weight: 600; }
.turning-quote { margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.turning-quote small { font-size: 11px; letter-spacing: .06em; color: #8f99c6; }
.turning-quote q { font: 600 20px/1.5 var(--serif); color: #f4f2ff; quotes: '「' '」'; }
.turning-why { margin: 8px 0 0; font-size: 13px; line-height: 1.75; color: #c4cae6; }
.turning-note { margin: 14px 0 0; font-size: 12px; color: #7f89b3; }
@media (max-width: 800px) { .turning-quote q { font-size: 18px; } .turning-item { padding: 14px; } }

/* announcement cards: the link variant matches the button variant */
a.announcement-link{text-decoration:none}

/* 30 秒速读: three takeaways above the relationship reading */
.quick-read { margin: 0 0 14px; padding: 24px 28px 26px; border: 1px solid rgba(255, 200, 186, .3); background: radial-gradient(circle at 92% 0%, rgba(255, 160, 140, .14), transparent 40%), linear-gradient(128deg, rgba(35, 38, 92, .94), rgba(17, 24, 60, .96)); box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 18px 40px rgba(1, 5, 23, .2); }
.quick-read[hidden] { display: none; }
.quick-read-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.quick-read-head .card-label { flex-basis: 100%; }
.quick-read-head h3 { margin: 0; font: 600 24px/1.35 var(--serif, "Noto Serif SC", serif); color: #f4f2ff; }
.quick-read-head h3 em { font-style: normal; color: #ffb9ad; }
.quick-read-weather { margin-left: auto; padding: 4px 12px; border: 1px solid rgba(255, 220, 160, .35); border-radius: 999px; color: #ffdca0; font-size: 13px; }
.quick-read-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.quick-read-jump { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; height: 100%; padding: 16px 18px; border: 1px solid rgba(206, 198, 255, .2); border-radius: 14px; background: rgba(8, 12, 36, .42); color: #dfe2f6; text-align: left; font: inherit; cursor: pointer; transition: border-color .2s, background .2s; }
.quick-read-jump:hover, .quick-read-jump:focus-visible { border-color: rgba(255, 190, 176, .6); background: rgba(20, 22, 58, .6); }
.quick-read-index { color: #ffab9b; font: 600 12px var(--mono, monospace); letter-spacing: .08em; }
.quick-read-jump small { color: #a7afd2; font-size: 13px; }
.quick-read-jump q { color: #fff; font: 600 17px/1.5 var(--serif, "Noto Serif SC", serif); quotes: "「" "」"; }
.quick-read-item.is-relation .quick-read-jump p { color: #fff; font: 600 17px/1.5 var(--serif, "Noto Serif SC", serif); }
.quick-read-jump p { margin: 0; font-size: 14px; line-height: 1.6; }
.quick-read-jump b { margin-top: auto; padding-top: 4px; color: #c9bdff; font-size: 12px; font-weight: 500; }
@media (max-width: 800px) {
  .quick-read { padding: 20px 18px 22px; }
  .quick-read-head h3 { font-size: 20px; }
  .quick-read-weather { margin-left: 0; }
  .quick-read-list { grid-template-columns: 1fr; gap: 10px; }
}

/* Expired group codes are hidden (the card style forces display:grid otherwise) */
.launch-qr-card[hidden] { display: none !important; }