:root {
  color-scheme: light;
  --ink: #26211f;
  --muted: #7f746f;
  --paper: #f4eee6;
  --cream: #fffaf4;
  --wine: #963f4d;
  --wine-dark: #74303c;
  --sage: #acc5a8;
  --line: rgba(68, 49, 43, .13);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }

/* Access gate */
.shell { display: grid; min-height: 100vh; place-items: center; padding: 32px 20px; background: radial-gradient(circle at 12% 18%, rgba(183,126,138,.22),transparent 34rem),radial-gradient(circle at 86% 82%,rgba(172,197,168,.3),transparent 32rem),#f7f2ec; }
.gate { width: min(100%,460px); padding: clamp(28px,6vw,48px); border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 28px 80px rgba(74,52,44,.13); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.status-line { display: flex; align-items: center; gap: 9px; margin-bottom: 54px; color: var(--muted); font-size: 13px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wine); box-shadow: 0 0 0 5px rgba(150,63,77,.1); }
.eyebrow { margin: 0 0 12px; color: var(--wine); font: 750 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .18em; }
.gate h1 { margin: 0; font-size: clamp(34px,8vw,52px); font-weight: 650; letter-spacing: -.045em; line-height: 1.04; }
.intro { margin: 18px 0 32px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.access-form label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 600; }
.input-wrap { position: relative; }
.access-form input { width: 100%; height: 54px; padding: 0 68px 0 16px; border: 1px solid var(--line); border-radius: 13px; outline: none; color: var(--ink); background: rgba(255,250,244,.92); transition: border-color 160ms ease,box-shadow 160ms ease; }
.access-form input:focus { border-color: rgba(150,63,77,.68); box-shadow: 0 0 0 4px rgba(150,63,77,.1); }
.reveal { position: absolute; top: 50%; right: 14px; border: 0; color: var(--muted); background: transparent; font-size: 12px; cursor: pointer; transform: translateY(-50%); }
.message { min-height: 22px; margin: 9px 2px 5px; font-size: 13px; }
.message.is-error { color: #c24155; }
.message.is-success { color: #39704c; }
.submit, .logout { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: space-between; padding: 0 18px; border: 0; border-radius: 13px; color: #fff; background: var(--wine); font-weight: 750; text-decoration: none; cursor: pointer; transition: transform 160ms ease,opacity 160ms ease; }
.submit:hover:not(:disabled), .logout:hover { transform: translateY(-1px); }
.submit:disabled { cursor: wait; opacity: .7; }
.privacy-note { margin: 24px 0 0; color: #938780; font-size: 12px; line-height: 1.6; }

/* Chapter one */
.story-page { min-width: 320px; overflow-x: hidden; background: var(--paper); }
.story-page::before, .story-page::after { position: fixed; z-index: -1; content: ""; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.story-page::before { top: -18vw; right: -10vw; width: 50vw; height: 50vw; background: rgba(183,126,138,.12); }
.story-page::after { bottom: -22vw; left: -12vw; width: 55vw; height: 55vw; background: rgba(172,197,168,.18); }
.story-header { position: fixed; top: 0; right: 0; left: 0; z-index: 30; display: grid; grid-template-columns: auto 1fr auto; min-height: calc(72px + env(safe-area-inset-top)); align-items: center; padding: env(safe-area-inset-top) max(24px,calc((100vw - 1240px)/2)) 0; border-bottom: 1px solid rgba(68,49,43,.09); background: rgba(244,238,230,.8); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.story-mark { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink); text-decoration: none; }
.story-mark em { color: var(--wine); font: italic 1.9rem/1 Georgia,serif; }
.story-mark span { font-size: .66rem; font-weight: 850; letter-spacing: .17em; }
.chapter-position { justify-self: center; margin: 0; color: var(--muted); font: 700 .65rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .16em; }
.chapter-position span { color: var(--wine); }
.exit-link { min-height: 44px; display: inline-flex; align-items: center; justify-self: end; color: var(--muted); font-size: .76rem; font-weight: 700; text-decoration: none; }

.confession-section { position: relative; display: grid; grid-template-columns: minmax(320px,.92fr) minmax(440px,1.08fr); min-height: 100vh; min-height: 100svh; align-items: center; gap: clamp(48px,6vw,88px); width: min(100% - 48px,1200px); margin: auto; padding: calc(112px + env(safe-area-inset-top)) 0 72px; }
.confession-section::before { position: absolute; top: 15%; left: -11%; width: 180px; height: 180px; content: ""; border: 1px solid rgba(150,63,77,.18); border-radius: 50%; box-shadow: inset 0 0 0 28px var(--paper), inset 0 0 0 29px rgba(150,63,77,.1); }
.chapter-copy { position: relative; z-index: 2; }
.chapter-kicker { margin: 0 0 26px; color: var(--wine); font: 800 .7rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .16em; }
.chapter-copy h1 { max-width: 620px; margin: 0; font-size: clamp(3.8rem,5.1vw,5.4rem); font-weight: 680; line-height: .98; letter-spacing: -.06em; }
.chapter-copy h1 i { display: inline-block; color: var(--wine); font-family: Georgia,"Songti SC",serif; font-style: normal; font-weight: 400; letter-spacing: -.045em; white-space: nowrap; }
.chapter-intro { max-width: 480px; margin: 38px 0 30px; color: var(--muted); font-size: .98rem; line-height: 1.95; }
.chapter-note { display: flex; align-items: flex-start; gap: 13px; width: fit-content; padding: 14px 17px; border: 1px solid rgba(150,63,77,.13); border-radius: 14px; background: rgba(255,250,244,.58); }
.chapter-note > span { color: var(--wine); }
.chapter-note p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.65; }
.chapter-note strong { color: var(--ink); font-weight: 750; }

.chat-stage { position: relative; width: min(100%,560px); justify-self: end; }
.phone-shadow { position: absolute; inset: 5% -5% -4% 8%; border-radius: 42px; background: rgba(113,77,65,.12); filter: blur(26px); pointer-events: none; transform: rotate(2deg); }
.chat-window { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr) auto; height: min(75vh,720px); min-height: 580px; overflow: hidden; border: 1px solid rgba(77,55,48,.14); border-radius: 34px; background: #eef0eb; box-shadow: 0 32px 80px rgba(77,55,48,.16), inset 0 0 0 7px rgba(255,255,255,.32); }
.chat-bar { position: relative; z-index: 3; display: grid; grid-template-columns: 44px 1fr 44px; min-height: 76px; align-items: center; padding: 8px 15px; border-bottom: 1px solid rgba(54,60,55,.08); background: rgba(247,248,245,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.chat-back, .chat-more { border: 0; color: #4f544f; background: transparent; cursor: default; }
.chat-back { font: 300 2rem/1 sans-serif; text-align: left; }
.chat-more { font-size: 1rem; letter-spacing: .08em; }
.chat-person { display: flex; align-items: center; justify-content: center; gap: 11px; }
.chat-person img { width: 38px; height: 38px; border: 2px solid #fff; border-radius: 12px; object-fit: cover; box-shadow: 0 3px 9px rgba(0,0,0,.08); }
.chat-person strong, .chat-person span { display: block; }
.chat-person strong { font-size: .83rem; font-weight: 720; }
.chat-person span { margin-top: 4px; color: #929790; font-size: .58rem; }
.chat-person span i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #67ad73; vertical-align: 1px; }

.chat-history { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 26px 20px 34px; scrollbar-color: rgba(79,84,79,.25) transparent; scrollbar-width: thin; scroll-behavior: smooth; }
.chat-history::-webkit-scrollbar { width: 5px; }
.chat-history::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(79,84,79,.22); }
.chat-history:focus-visible { outline: 3px solid rgba(150,63,77,.32); outline-offset: -4px; }
.chat-item { display: none; }
.chat-item.is-visible { display: block; animation: message-in 620ms cubic-bezier(.2,.75,.2,1) both; }
.time-divider { margin: 8px 0 19px; color: #969b95; font-size: .61rem; text-align: center; }
.message-row { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 17px; }
.message-row.chat-item { display: none; }
.message-row.chat-item.is-visible { display: flex; }
.message-row.mine { flex-direction: row-reverse; }
.avatar { flex: 0 0 auto; width: 36px; height: 36px; border: 2px solid rgba(255,255,255,.9); border-radius: 10px; object-fit: cover; box-shadow: 0 2px 7px rgba(0,0,0,.08); }
.bubble { position: relative; max-width: min(74%,330px); padding: 11px 14px; border-radius: 6px 17px 17px; color: #3f433f; background: #fff; box-shadow: 0 2px 5px rgba(38,45,39,.05); font-size: .84rem; line-height: 1.58; }
.mine .bubble { border-radius: 17px 6px 17px 17px; color: #263027; background: #b7d4ae; }
.bubble::before { position: absolute; top: 9px; left: -6px; width: 12px; height: 12px; content: ""; background: inherit; clip-path: polygon(100% 0,100% 100%,0 0); }
.mine .bubble::before { right: -6px; left: auto; clip-path: polygon(0 0,100% 0,0 100%); }
.sticker-message { width: min(42%,148px); min-width: 74px; }
.sticker-message img { width: 100%; max-height: 148px; object-fit: contain; object-position: left center; }
.mine .sticker-message img { object-position: right center; }
.system-message { width: fit-content; max-width: 80%; margin: 8px auto 19px; padding: 5px 10px; border-radius: 999px; color: #9a9f98; background: rgba(255,255,255,.48); font-size: .58rem; text-align: center; }

@keyframes message-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.chat-controls { display: grid; grid-template-columns: auto 1fr auto; min-height: 66px; align-items: center; gap: 12px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(54,60,55,.08); background: rgba(247,248,245,.95); }
.playback-status { color: var(--wine); font: 760 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.playback-status small { color: #a49d97; }
.chat-controls p { margin: 0; overflow: hidden; color: #858b84; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
#replay-chat { display: inline-flex; min-height: 36px; align-items: center; gap: 5px; padding: 0 12px; border: 1px solid rgba(150,63,77,.18); border-radius: 999px; color: var(--wine-dark); background: #fffaf4; font-size: .65rem; font-weight: 700; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 240ms ease, transform 180ms ease; }
#replay-chat.is-ready { opacity: 1; pointer-events: auto; }
#replay-chat:hover { transform: translateY(-1px); }
.swipe-hint { display: flex; justify-content: center; gap: 8px; margin: 16px 0 0; color: #91857f; font-size: .68rem; letter-spacing: .04em; }
.swipe-hint span { color: var(--wine); }

.celebration { position: fixed; inset: 0; z-index: 100; overflow: hidden; pointer-events: none; }
.celebration.is-active { animation: celebration-glow 5.2s ease-out both; }
.celebration-particle { position: absolute; width: 9px; height: 16px; border-radius: 3px; opacity: 0; background: var(--particle-color); box-shadow: 0 0 12px color-mix(in srgb,var(--particle-color) 62%,transparent); }
.celebration-particle:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; }
.celebration-particle:nth-child(4n) { width: 12px; height: 5px; border-radius: 99px; }
.celebration.is-active .celebration-particle { animation: celebration-burst 4.4s cubic-bezier(.12,.72,.18,1) var(--delay) both; }

@keyframes celebration-glow {
  0% { background: radial-gradient(circle at 50% 42%,rgba(255,245,213,.18),transparent 8%); }
  18% { background: radial-gradient(circle at 50% 42%,rgba(255,245,213,.22),transparent 42%); }
  100% { background: transparent; }
}

@keyframes celebration-burst {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.15) rotate(0); }
  8% { opacity: 1; }
  68% { opacity: .92; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y))) scale(.72) rotate(var(--turn)); }
}

@media (max-width: 850px) {
  .chapter-position { display: none; }
  .confession-section { grid-template-columns: 1fr; gap: 42px; width: min(100% - 32px,620px); padding-top: calc(110px + env(safe-area-inset-top)); }
  .confession-section::before { display: none; }
  .chapter-copy h1 { max-width: 560px; font-size: clamp(3.8rem,12vw,5.4rem); }
  .chapter-intro { margin-top: 28px; }
  .chat-stage { justify-self: center; }
  .chat-window { height: min(76vh,680px); }
}

@media (max-width: 520px) {
  .story-header { padding-right: 18px; padding-left: 18px; }
  .confession-section { width: 100%; padding-right: 14px; padding-left: 14px; }
  .chapter-copy { padding: 0 7px; }
  .chapter-copy h1 { font-size: clamp(3.2rem,15vw,4.35rem); line-height: 1.03; letter-spacing: -.055em; }
  .chat-window { height: 72svh; min-height: 540px; border-radius: 27px; }
  .chat-history { padding-right: 14px; padding-left: 14px; }
  .chat-controls { grid-template-columns: auto 1fr; }
  .chat-controls p { display: none; }
  #replay-chat { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  html, .chat-history { scroll-behavior: auto; }
  .chat-item.is-visible { animation: none; }
  .celebration { display: none; }
}

/* Little lovebrain point of view + interactive dialogue choices */
.chat-window { grid-template-rows: auto minmax(0,1fr) auto; }
.chat-controls { min-height: 112px; align-items: center; gap: 14px; padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.interaction-slot { min-width: 0; }
.interaction-slot > p { margin: 0 0 8px; overflow: hidden; color: #858b84; font-size: .63rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.choice-button { display: grid; width: 100%; min-height: 58px; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 9px 13px 9px 15px; border: 1px solid rgba(150,63,77,.2); border-radius: 16px; color: var(--wine-dark); background: linear-gradient(135deg,#fffaf4,#fff 62%); box-shadow: 0 8px 24px rgba(116,48,60,.1); text-align: left; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(7px); transition: opacity 220ms ease,transform 220ms ease,border-color 180ms ease,box-shadow 180ms ease; }
.choice-button.is-ready { opacity: 1; pointer-events: auto; transform: none; }
.choice-button.is-ready:hover { border-color: rgba(150,63,77,.42); box-shadow: 0 10px 28px rgba(116,48,60,.16); transform: translateY(-1px); }
.choice-button:focus-visible { outline: 3px solid rgba(150,63,77,.28); outline-offset: 2px; }
.choice-button:disabled { cursor: default; }
.choice-copy { display: grid; min-width: 0; gap: 3px; }
.choice-copy small { color: #a08282; font: 720 .54rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .08em; }
.choice-copy strong { overflow: hidden; font-size: .74rem; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.choice-arrow { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: #fff; background: var(--wine); font: 300 1.45rem/1 sans-serif; }
#replay-chat { align-self: center; white-space: nowrap; }

@media (max-width: 520px) {
  .chat-window { height: 76svh; min-height: 570px; }
  .chat-controls { grid-template-columns: auto minmax(0,1fr); min-height: 122px; gap: 10px; padding-right: 13px; padding-left: 13px; }
  .interaction-slot { grid-column: 2; }
  .interaction-slot > p { display: block; text-align: left; }
  #replay-chat { grid-column: 2; grid-row: 1; justify-self: end; }
  .choice-copy strong { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .choice-button { transition: none; }
}

/* Anniversary atmosphere */
.story-page {
  background:
    radial-gradient(circle at 78% 12%,rgba(183,126,138,.18),transparent 30rem),
    radial-gradient(circle at 10% 78%,rgba(172,197,168,.2),transparent 34rem),
    linear-gradient(145deg,#f7f0e8 0%,#f4eee6 52%,#efe5dc 100%);
}
.story-header::after { position: absolute; bottom: -1px; left: 50%; width: min(240px,32vw); height: 1px; content: ""; background: linear-gradient(90deg,transparent,rgba(150,63,77,.46),transparent); transform: translateX(-50%); }
.anniversary-date { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 0 0 34px; padding: 8px 12px; border: 1px solid rgba(150,63,77,.17); border-radius: 999px; color: #8c6f6f; background: rgba(255,250,244,.62); font: 740 .56rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .09em; }
.anniversary-date strong { color: var(--wine); font-size: .62rem; }
.anniversary-date i { color: var(--wine); font: normal .65rem/1 Georgia,serif; }
.chapter-copy h1 span { font-size: .72em; letter-spacing: -.055em; }
.chapter-copy h1 b { color: #b78a8a; font: 400 .58em/1 Georgia,serif; }
.chapter-copy::after { position: absolute; right: -8px; bottom: -48px; z-index: -1; content: "2"; color: rgba(150,63,77,.055); font: italic 320px/.7 Georgia,serif; pointer-events: none; }
.chat-window { border-color: rgba(150,63,77,.16); box-shadow: 0 34px 90px rgba(77,55,48,.2),inset 0 0 0 7px rgba(255,255,255,.38); }
.chat-bar { background: rgba(255,250,247,.94); }
.chat-person strong { color: var(--wine-dark); letter-spacing: .01em; }
.chat-person span { letter-spacing: .025em; }
.choice-button { background: linear-gradient(135deg,#fff8f3,#fff 58%,#f9f1ea); }
.swipe-hint::before,.swipe-hint::after { width: 32px; height: 1px; align-self: center; content: ""; background: linear-gradient(90deg,transparent,rgba(150,63,77,.3)); }
.swipe-hint::after { transform: scaleX(-1); }
@media (max-width: 850px) {
  .anniversary-date { margin-bottom: 27px; }
  .chapter-copy::after { right: 10px; bottom: -24px; font-size: 230px; }
}
@media (max-width: 520px) {
  .anniversary-date { gap: 7px; max-width: 100%; font-size: .5rem; letter-spacing: .055em; }
  .chapter-copy h1 span { font-size: .68em; }
}

/* Chapter handoff */
.chapter-transition[hidden],.memory-section[hidden] { display: none; }
.chapter-transition { position: relative; z-index: 6; margin: 22px 0 0; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 420ms ease,transform 420ms ease; }
.chapter-transition.is-ready { opacity: 1; pointer-events: auto; transform: none; }
.chapter-transition > p { margin: 0 0 9px; color: #9b8c86; font: 760 .55rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .14em; text-align: center; }
#continue-story { display: flex; width: 100%; min-height: 66px; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px 11px 18px; border: 1px solid var(--wine); border-radius: 18px; color: #fff; background: var(--wine); box-shadow: 0 14px 34px rgba(116,48,60,.24); text-align: left; text-decoration: none; cursor: pointer; pointer-events: auto; transition: transform 180ms ease,box-shadow 180ms ease,background 180ms ease; }
#continue-story:hover { background: var(--wine-dark); box-shadow: 0 17px 40px rgba(116,48,60,.3); transform: translateY(-2px); }
#continue-story:focus-visible { outline: 3px solid rgba(150,63,77,.28); outline-offset: 3px; }
#continue-story > span { display: grid; gap: 4px; }
#continue-story strong { font-size: .82rem; }
#continue-story small { color: rgba(255,255,255,.72); font: 680 .57rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .06em; }
#continue-story > b { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: var(--wine-dark); background: #fff8f0; font-size: 1rem; }

/* Chapter one — festival memories */
.memory-section { min-height: 100vh; scroll-margin-top: 72px; padding: clamp(96px,10vw,150px) 24px 110px; color: #fff8f0; background: #40252c; opacity: 0; transform: translateY(24px); }
.memory-section.is-visible { animation: chapter-reveal 700ms cubic-bezier(.2,.75,.2,1) both; }
@keyframes chapter-reveal { to { opacity: 1; transform: none; } }
.memory-heading { display: grid; grid-template-columns: minmax(0,.9fr) minmax(300px,.55fr); column-gap: clamp(48px,8vw,120px); width: min(100%,1140px); margin: 0 auto clamp(64px,8vw,108px); }
.memory-kicker { grid-column: 1/-1; margin: 0 0 28px; color: #e5a6ae; font: 780 .65rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .16em; }
.memory-heading h2 { margin: 0; font-size: clamp(4.2rem,7vw,7rem); font-weight: 650; line-height: .9; letter-spacing: -.07em; }
.memory-heading h2 i { color: #efb4b8; font-family: Georgia,"Songti SC",serif; font-style: normal; font-weight: 400; }
.memory-heading > p:last-child { align-self: end; margin: 0 0 8px; color: #cdbdc0; font-size: .88rem; line-height: 1.9; }
.memory-carousel { width: min(100%,1220px); margin: auto; }
.memory-carousel-nav { display: flex; align-items: center; justify-content: space-between; width: min(100%,1140px); margin: 0 auto 22px; }
.memory-progress { display: flex; align-items: center; gap: 12px; margin: 0; color: #cdbdc0; font: 750 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .1em; }
.memory-progress > span:first-child { color: #fff8f0; font-size: 1rem; }
.memory-progress i { width: 54px; height: 1px; background: linear-gradient(90deg,#e5a6ae,rgba(229,166,174,.22)); }
.memory-arrows { display: flex; gap: 10px; }
.memory-arrows button { display: grid; width: 46px; height: 46px; padding: 0; place-items: center; border: 1px solid rgba(255,248,240,.25); border-radius: 50%; color: #fff8f0; background: rgba(255,255,255,.06); cursor: pointer; transition: color 220ms ease,background 220ms ease,border-color 220ms ease,transform 220ms ease,opacity 220ms ease; }
.memory-arrows button:hover:not(:disabled) { color: #40252c; border-color: #efb4b8; background: #efb4b8; transform: translateY(-2px); }
.memory-arrows button:focus-visible,.memory-dots button:focus-visible,.memory-viewport:focus-visible { outline: 3px solid rgba(239,180,184,.48); outline-offset: 3px; }
.memory-arrows button:disabled { opacity: .3; cursor: default; }
.memory-arrows svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.memory-swipe-instruction { margin: -4px auto 12px; color: #cdbdc0; font-size: .7rem; letter-spacing: .02em; text-align: center; }
.memory-swipe-instruction span { display: inline-block; margin-right: 7px; color: #e5a6ae; animation: swipe-nudge 2.2s ease-in-out infinite; }
.memory-viewport { width: 100%; padding: 10px 40px 42px; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y; }
.memory-viewport::-webkit-scrollbar { display: none; }
.memory-list { display: flex; align-items: stretch; gap: 34px; width: 100%; margin: auto; }
.memory-card { position: relative; display: grid; flex: 0 0 100%; grid-template-columns: 150px minmax(240px,.8fr) minmax(320px,1.2fr); align-items: stretch; gap: clamp(26px,4vw,58px); min-height: 360px; padding: clamp(28px,4vw,48px); overflow: hidden; border: 1px solid rgba(255,255,255,.5); border-radius: 32px; color: var(--ink); background: #f7f0e8; box-shadow: 0 30px 80px rgba(20,8,12,.22); opacity: .42; scroll-snap-align: center; scroll-snap-stop: always; transform: scale(.965) translateY(10px); transition: opacity 480ms ease,transform 620ms cubic-bezier(.2,.8,.2,1),box-shadow 480ms ease; }
.memory-card.is-active { opacity: 1; box-shadow: 0 34px 90px rgba(20,8,12,.3); transform: none; }
.memory-card::after { position: absolute; right: -18px; bottom: -54px; content: attr(data-mark); color: rgba(150,63,77,.05); font: italic 230px/.8 Georgia,serif; pointer-events: none; }
.memory-card-head { display: flex; flex-direction: column; justify-content: space-between; padding-right: 24px; border-right: 1px solid rgba(68,49,43,.13); }
.memory-card-head p { margin: 0; color: var(--wine); font: 800 .58rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .14em; }
.memory-card-head time { color: #9d8d86; font: 720 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .06em; writing-mode: vertical-rl; transform: rotate(180deg); }
.memory-copy { align-self: center; }
.memory-label { margin: 0 0 15px; color: var(--wine); font-size: .72rem; font-weight: 750; letter-spacing: .09em; }
.memory-copy h3 { margin: 0 0 25px; font-size: clamp(2.3rem,3.7vw,4rem); font-weight: 650; line-height: .98; letter-spacing: -.055em; }
.memory-copy h3 i { color: var(--wine); font-family: Georgia,"Songti SC",serif; font-style: normal; font-weight: 400; }
.memory-copy > p:last-child { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.85; }
.memory-artifact { position: relative; z-index: 1; align-self: center; padding: 24px; border: 1px solid rgba(68,49,43,.1); border-radius: 22px; background: rgba(255,255,255,.7); box-shadow: 0 16px 36px rgba(74,52,44,.09); }
.artifact-time { margin: 0 0 18px; color: #988a84; font: 720 .58rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .09em; }
.transfer-ticket > div { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 9px; margin-top: 9px; padding: 13px 14px; border-radius: 13px; background: #fffaf4; font-size: .68rem; }
.transfer-ticket > div span:last-child { text-align: right; }
.transfer-ticket > div b { color: #c6afa8; font-weight: 500; }
.transfer-ticket > div strong { color: var(--wine); font: 760 .9rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.transfer-ticket > small { display: block; margin: 20px 2px 0; color: var(--muted); font-size: .66rem; }
.mini-chat { display: grid; gap: 9px; }
.mini-chat p { width: fit-content; max-width: 88%; margin: 0; padding: 10px 13px; border-radius: 5px 14px 14px; background: #fff; }
.mini-chat p.from-lovebrain { justify-self: end; border-radius: 14px 5px 14px 14px; background: #c4dcb9; }
.mini-chat span,.mini-chat strong { display: block; }
.mini-chat span { margin-bottom: 5px; color: #9b918c; font: 680 .52rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.mini-chat strong { font-size: .73rem; font-weight: 560; line-height: 1.55; }
.timezone-pair { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; color: var(--wine-dark); font: 750 .58rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.timezone-pair i { color: #b9a49e; font-style: normal; }
.timezone-note blockquote { margin: 0; }
.timezone-note blockquote p { display: grid; grid-template-columns: 105px 1fr; gap: 12px; margin: 0; padding: 11px 0; border-top: 1px solid rgba(68,49,43,.09); font-size: .74rem; line-height: 1.5; }
.timezone-note blockquote small { color: #958680; font-size: .54rem; }
.memory-end { display: grid; justify-items: center; gap: 9px; width: min(100%,1140px); margin: 84px auto 0; color: #e3cdd0; text-align: center; }
.memory-end > span { color: #e9aab1; font-size: 1rem; }
.memory-end p { margin: 0; font: 780 .6rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .18em; }
.memory-end small { color: #bca9ad; font-size: .7rem; }
.memory-carousel-foot { display: flex; align-items: center; justify-content: center; width: min(100%,1140px); margin: -10px auto 0; }
.memory-dots { display: flex; align-items: center; gap: 9px; }
.memory-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,248,240,.28); cursor: pointer; transition: width 300ms ease,background 300ms ease; }
.memory-dots button.is-active { width: 34px; background: #efb4b8; }
@keyframes swipe-nudge { 0%,100% { transform: translateX(0); } 45% { transform: translateX(4px); } 55% { transform: translateX(-4px); } }

@media (max-width: 980px) {
  .memory-card { grid-template-columns: 92px minmax(0,.85fr) minmax(280px,1.15fr); gap: 28px; }
  .memory-card-head { padding-right: 18px; }
}

@media (max-width: 760px) {
  .memory-section { padding: 96px 16px 88px; }
  .memory-heading { grid-template-columns: 1fr; margin-bottom: 58px; }
  .memory-heading h2 { font-size: clamp(3.45rem,14vw,5rem); line-height: .94; }
  .memory-heading > p:last-child { margin-top: 28px; max-width: 520px; }
  .memory-carousel-nav { margin-bottom: 13px; padding: 0 4px; }
  .memory-viewport { margin: 0 -16px; width: calc(100% + 32px); padding: 8px 16px 36px; }
  .memory-list { gap: 14px; }
  .memory-card { grid-template-columns: 1fr; gap: 26px; min-height: 0; padding: 25px 22px 22px; border-radius: 25px; }
  .memory-card-head { flex-direction: row; align-items: center; padding: 0 0 17px; border-right: 0; border-bottom: 1px solid rgba(68,49,43,.13); }
  .memory-card-head time { writing-mode: initial; transform: none; }
  .memory-copy h3 { font-size: clamp(2.45rem,10vw,3.5rem); }
  .memory-artifact { padding: 18px; border-radius: 18px; }
}

@media (max-width: 520px) {
  .confession-section { gap: 36px; padding-bottom: 52px; }
  .anniversary-date { margin-bottom: 24px; }
  .chapter-kicker { margin-bottom: 20px; }
  .chapter-copy::after { display: none; }
  .chat-stage { width: 100%; }
  .chapter-transition { margin-top: 18px; padding: 0 4px; }
  .memory-heading h2 { font-size: clamp(3.2rem,13.5vw,4.2rem); }
  .memory-heading > p:last-child { font-size: .8rem; }
  .memory-copy h3 { font-size: clamp(2.35rem,10vw,3rem); }
  .memory-arrows button { width: 42px; height: 42px; }
  .memory-progress i { width: 38px; }
  .memory-swipe-instruction { margin-top: 0; padding: 0 12px; line-height: 1.5; }
  .transfer-ticket > div { gap: 6px; padding: 12px 10px; font-size: .58rem; }
  .transfer-ticket > div strong { font-size: .76rem; }
  .timezone-pair { flex-wrap: wrap; font-size: .53rem; }
  .timezone-note blockquote p { grid-template-columns: 88px 1fr; gap: 9px; font-size: .67rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-transition,.memory-section { transition: none; animation: none; }
  .memory-section.is-visible { opacity: 1; transform: none; }
  .memory-card,.memory-arrows button,.memory-dots button { transition: none; }
  .memory-swipe-instruction span { animation: none; }
}

/* Static holiday chat records */
.static-chat-card { width: min(100%,780px); margin: 0 auto; padding: 22px 24px 32px; border: 1px solid rgba(255,255,255,.5); border-radius: 32px; color: #3f433f; background: #eef0eb; box-shadow: 0 30px 80px rgba(20,8,12,.22); }
.static-chat-date { display: flex; justify-content: center; margin: 0 0 24px; }
.static-chat-date time { padding: 6px 12px; border-radius: 999px; color: #8f958e; background: rgba(255,255,255,.55); font-size: .6rem; }
.static-chat-log { display: grid; gap: 15px; }
.static-message { display: flex; align-items: flex-start; gap: 10px; }
.static-message.from-lovebrain { flex-direction: row-reverse; }
.static-avatar { flex: 0 0 auto; width: 40px; height: 40px; border: 2px solid rgba(255,255,255,.92); border-radius: 11px; object-fit: cover; box-shadow: 0 2px 7px rgba(0,0,0,.08); }
.static-bubble { position: relative; width: fit-content; max-width: min(76%,520px); padding: 11px 14px; border-radius: 6px 17px 17px; background: #fff; box-shadow: 0 2px 5px rgba(38,45,39,.05); font-size: .82rem; line-height: 1.6; }
.from-lovebrain .static-bubble { border-radius: 17px 6px 17px 17px; color: #263027; background: #b7d4ae; }
.static-bubble::before { position: absolute; top: 10px; left: -6px; width: 12px; height: 12px; content: ""; background: inherit; clip-path: polygon(100% 0,100% 100%,0 0); }
.from-lovebrain .static-bubble::before { right: -6px; left: auto; clip-path: polygon(0 0,100% 0,0 100%); }
.static-list { min-width: min(76%,320px); line-height: 1.75; }
.static-emoji { min-width: 58px; padding: 3px 5px; font-size: 2.5rem; line-height: 1; text-align: center; }
.static-gif { width: 76px; padding: 8px; border-radius: 6px 17px 17px; background: #fff; box-shadow: 0 2px 5px rgba(38,45,39,.05); }
.static-gif img { width: 60px; height: 60px; object-fit: contain; }
.from-lovebrain .static-gif { border-radius: 17px 6px 17px 17px; }
.static-gif--anniversary { width: 92px; }
.static-gif--anniversary img { width: 76px; height: 76px; }
.static-photo { width: min(72%,230px); overflow: hidden; border: 4px solid #fff; border-radius: 7px 18px 18px; background: #fff; box-shadow: 0 5px 16px rgba(38,45,39,.13); }
.static-photo img { width: 100%; height: auto; object-fit: cover; }
.static-photo--wide { width: min(78%,270px); border-radius: 18px 7px 18px 18px; }
.static-photo--portrait { width: 132px; max-width: 42%; }
.static-photo--choice { width: min(68%,220px); }
.static-placeholder { color: #878d86; font-size: .72rem; }

.memory-card--chat { align-items: start; min-height: 520px; }
.memory-card--chat .memory-card-head { align-self: stretch; }
.memory-card--chat .memory-copy { align-self: center; }
.embedded-chat { align-self: start; width: 100%; padding: 18px; background: #eef0eb; }
.embedded-chat .static-chat-date { margin-bottom: 18px; }
.embedded-chat .static-chat-log { gap: 13px; }
.embedded-chat .static-avatar { width: 34px; height: 34px; border-radius: 9px; }
.embedded-chat .static-bubble { max-width: calc(100% - 46px); padding: 9px 11px; font-size: .7rem; }
.embedded-chat .static-list { min-width: 0; line-height: 1.65; }
.static-sticker { padding: 2px 4px; }
.static-sticker img { width: 52px; height: 52px; object-fit: contain; }
.static-sticker--expression img { width: 58px; height: 58px; }
.wechat-transfer { position: relative; width: min(250px,calc(100% - 46px)); overflow: hidden; border-radius: 7px; color: #fff; background: #f29b38; box-shadow: 0 3px 9px rgba(130,77,23,.18); }
.wechat-transfer::before { position: absolute; top: 12px; right: -7px; width: 14px; height: 14px; content: ""; background: #f29b38; clip-path: polygon(0 0,100% 0,0 100%); transform: rotate(-45deg); }
.wechat-transfer-main { display: flex; align-items: center; gap: 12px; padding: 14px; }
.wechat-transfer-main > span { display: grid; flex: 0 0 auto; width: 39px; height: 39px; place-items: center; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; font: 500 1.1rem/1 Georgia,serif; }
.wechat-transfer-main p { display: grid; gap: 4px; margin: 0; }
.wechat-transfer-main strong { font-size: 1rem; font-weight: 560; }
.wechat-transfer-main small { color: rgba(255,255,255,.82); font-size: .6rem; }
.wechat-transfer-footer { padding: 6px 11px; color: #a49790; background: #fff; font-size: .52rem; }

@media (max-width: 520px) {
  .static-chat-card { padding: 18px 13px 24px; border-radius: 24px; }
  .static-chat-date { margin-bottom: 20px; }
  .static-chat-log { gap: 13px; }
  .static-message { gap: 8px; }
  .static-avatar { width: 34px; height: 34px; border-radius: 9px; }
  .static-bubble { max-width: calc(100% - 48px); padding: 10px 12px; font-size: .76rem; line-height: 1.55; }
  .static-list { min-width: 0; line-height: 1.68; }
  .static-emoji { min-width: 50px; font-size: 2.2rem; }
  .static-gif { width: 66px; padding: 7px; }
  .static-gif img { width: 52px; height: 52px; }
  .static-gif--anniversary { width: 78px; }
  .static-gif--anniversary img { width: 64px; height: 64px; }
  .static-photo { width: min(74%,210px); }
  .static-photo--wide { width: min(78%,230px); }
  .static-photo--portrait { width: 112px; max-width: 40%; }
  .static-photo--choice { width: min(70%,190px); }
  .memory-card--chat { min-height: 0; }
  .embedded-chat { padding: 15px 10px 18px; }
  .embedded-chat .static-bubble { max-width: calc(100% - 42px); font-size: .68rem; }
  .wechat-transfer { width: min(230px,calc(100% - 42px)); }
  .static-sticker img { width: 46px; height: 46px; }
  .static-sticker--expression img { width: 52px; height: 52px; }
}

/* Chapter two — conversation archive */
#continue-to-stats { display: flex; align-items: center; justify-content: space-between; gap: 26px; min-width: 270px; margin-top: 18px; padding: 14px 16px 14px 20px; border: 1px solid rgba(255,248,240,.22); border-radius: 18px; color: #40252c; background: #fff8f0; box-shadow: 0 16px 38px rgba(20,8,12,.2); text-align: left; text-decoration: none; transition: transform 220ms ease,box-shadow 220ms ease; }
#continue-to-stats:hover { box-shadow: 0 20px 48px rgba(20,8,12,.3); transform: translateY(-2px); }
#continue-to-stats:focus-visible { outline: 3px solid rgba(239,180,184,.55); outline-offset: 4px; }
#continue-to-stats > span { display: grid; gap: 4px; }
#continue-to-stats strong { font-size: .82rem; }
#continue-to-stats small { color: #8f777c; font: 680 .58rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .05em; }
#continue-to-stats b { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff8f0; background: var(--wine); }
.stats-section[hidden] { display: none; }
.stats-section { min-height: 100vh; scroll-margin-top: 72px; padding: clamp(96px,10vw,150px) 24px 120px; color: #f7eee8; background: radial-gradient(circle at 82% 3%,rgba(150,63,77,.26),transparent 30%),linear-gradient(180deg,#1d1719 0%,#120f10 100%); opacity: 0; transform: translateY(28px); }
.stats-section.is-visible { animation: chapter-reveal 700ms cubic-bezier(.2,.75,.2,1) both; }
.stats-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.45fr); column-gap: clamp(42px,8vw,118px); width: min(100%,1140px); margin: 0 auto clamp(62px,8vw,100px); }
.stats-kicker { grid-column: 1/-1; margin: 0 0 28px; color: #e5a6ae; font: 780 .65rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .16em; }
.stats-heading h2 { margin: 0; color: #fff8f0; font-size: clamp(3.8rem,7vw,7rem); font-weight: 650; line-height: .88; letter-spacing: -.07em; }
.stats-heading h2 i { color: #efb4b8; font-family: Georgia,"Songti SC",serif; font-style: normal; font-weight: 400; }
.stats-heading h2 > span { color: transparent; -webkit-text-stroke: 1px rgba(255,248,240,.68); }
.stats-heading h2 b { font: inherit; }
.stats-heading > p:last-child { align-self: end; margin: 0 0 6px; color: #bdaeb1; font-size: .88rem; line-height: 1.9; }
.stats-dashboard { width: min(100%,1080px); margin: auto; }
.stats-loading { display: grid; min-height: 260px; place-items: center; align-content: center; gap: 18px; border: 1px solid rgba(255,255,255,.09); border-radius: 28px; color: #bdaeb1; background: rgba(255,255,255,.035); }
.stats-loading[hidden],.stats-content[hidden] { display: none; }
.stats-loading span { width: 34px; height: 34px; border: 2px solid rgba(239,180,184,.18); border-top-color: #efb4b8; border-radius: 50%; animation: stats-spin 900ms linear infinite; }
.stats-loading p { margin: 0; font-size: .78rem; }
@keyframes stats-spin { to { transform: rotate(360deg); } }
.stats-content { display: grid; min-width: 0; gap: 28px; }
.stats-overview { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.stats-overview article { display: grid; min-height: 180px; padding: 23px; align-content: space-between; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: rgba(255,255,255,.055); opacity: 0; transform: translateY(16px); transition: opacity 500ms ease,transform 600ms cubic-bezier(.2,.8,.2,1); }
.stats-overview article:nth-child(2) { background: var(--wine); }
.stats-overview article span,.stats-overview article small { color: #bdaeb1; font: 720 .58rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .1em; }
.stats-overview article:nth-child(2) span,.stats-overview article:nth-child(2) small { color: rgba(255,255,255,.7); }
.stats-overview article strong { color: #fff8f0; font: 520 clamp(2rem,3.5vw,3.35rem)/1 Georgia,"Songti SC",serif; letter-spacing: -.04em; }
.stats-overview article.is-revealed,.data-card.is-revealed,.stats-source-note.is-revealed { opacity: 1; transform: none; }
.data-card { padding: clamp(24px,3.5vw,42px); overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 28px; color: #40383a; background: #f6efe8; box-shadow: 0 28px 70px rgba(0,0,0,.18); opacity: 0; transform: translateY(20px); transition: opacity 550ms ease,transform 680ms cubic-bezier(.2,.8,.2,1); }
.data-card-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.data-card-head span { color: var(--wine); font: 800 .58rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .14em; }
.data-card-head h3 { margin: 10px 0 0; font-size: clamp(1.65rem,3vw,2.7rem); font-weight: 650; line-height: 1.05; letter-spacing: -.045em; }
.data-card-head > p { max-width: 260px; margin: 0; color: #8c7f7b; font-size: .76rem; line-height: 1.55; text-align: right; }
.data-card--timeline { background: linear-gradient(145deg,#f8f1ea,#efe3d9); }
.yearly-bars { display: grid; gap: 13px; margin-bottom: 36px; }
.year-row { display: grid; grid-template-columns: 52px minmax(0,1fr) 80px; align-items: center; gap: 14px; color: #776b68; font: 700 .66rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.year-row > span { text-align: right; }
.year-track { display: flex; width: var(--year-width); min-width: 10%; height: 12px; overflow: hidden; border-radius: 99px; background: #ded1ca; }
.year-track i { width: var(--part); background: var(--wine); }.year-track b { flex: 1; background: #d7a1a8; }
.monthly-chart-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #c9b7b0 transparent; }
.monthly-chart { display: block; width: 100%; min-width: 760px; }
.chart-grid line { stroke: rgba(64,56,58,.1); }.chart-grid text,.chart-labels text { fill: #948784; font: 10px ui-monospace,SFMono-Regular,Menlo,monospace; }
.chart-area { fill: url(#monthly-area); }.chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chart-line--total { stroke: var(--wine); stroke-width: 4; }.chart-line--ginger { stroke: #6d6664; stroke-width: 2; stroke-dasharray: 5 6; }.chart-line--lovebrain { stroke: #d49ba3; stroke-width: 2.5; }
.chart-peak { fill: #fff8f0; stroke: var(--wine); stroke-width: 4; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; color: #776b68; font-size: .67rem; }
.chart-legend span { display: flex; align-items: center; gap: 7px; }.chart-legend i { width: 20px; height: 3px; border-radius: 99px; }
.legend-total { background: var(--wine); }.legend-ginger { background: #6d6664; }.legend-lovebrain { background: #d49ba3; }
.data-card--heatmap { color: #f7eee8; background: linear-gradient(145deg,#4b2c34,#342027); }
.data-card--heatmap .data-card-head span { color: #efb4b8; }.data-card--heatmap .data-card-head > p { color: #c9b8bc; }
.heatmap-shell { overflow-x: auto; padding: 9px 2px 16px; scrollbar-width: thin; scrollbar-color: #9d6570 transparent; }
.daily-heatmap { display: grid; grid-template-rows: repeat(7,11px); grid-auto-columns: 11px; gap: 3px; width: max-content; min-width: 100%; }
.heat-cell { border-radius: 3px; background: rgba(255,255,255,.07); }.heat-1 { background: #71444d; }.heat-2 { background: #965262; }.heat-3 { background: #bd6879; }.heat-4 { background: #dd8d9c; }.heat-5 { background: #f3bbc2; }
.heat-cell.is-peak { outline: 2px solid #fff8f0; outline-offset: 1px; }
.heatmap-note { display: flex; align-items: center; gap: 5px; margin-top: 12px; color: #c9b8bc; font-size: .63rem; }
.heatmap-note i { width: 11px; height: 11px; border-radius: 3px; background: #71444d; }.heatmap-note i:nth-of-type(2) { background:#965262; }.heatmap-note i:nth-of-type(3) { background:#bd6879; }.heatmap-note i:nth-of-type(4) { background:#dd8d9c; }.heatmap-note i:nth-of-type(5) { background:#f3bbc2; }
.heatmap-note strong { margin-left: auto; color: #fff8f0; font-weight: 650; }
.stats-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; }
.data-card--hours { color: #f7eee8; background: #292326; }.data-card--hours .data-card-head span { color: #efb4b8; }.data-card--hours .data-card-head > p { color: #bdaeb1; }
.hourly-chart { display: grid; grid-template-columns: repeat(24,1fr); align-items: end; gap: 5px; height: 230px; padding-top: 12px; }
.hour-bar { display: grid; grid-template-rows: 1fr 18px; align-items: end; gap: 7px; height: 100%; }.hour-bar i { display: block; height: var(--bar-height); min-height: 3px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg,#d795a0,#74404b); opacity: .76; transition: opacity 180ms ease,transform 180ms ease; transform-origin: bottom; }
.hour-bar:hover i,.hour-bar.is-peak i { opacity: 1; transform: scaleX(1.18); }.hour-bar.is-peak i { background: linear-gradient(180deg,#ffe3be,#d795a0); box-shadow: 0 0 22px rgba(255,211,184,.25); }
.hour-bar span { color: #a9999d; font: 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-align: center; }
.data-card--balance { background: #fff9f2; }
.share-visual { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 26px; }.share-ring { display: grid; width: 154px; height: 154px; place-items: center; border-radius: 50%; background: conic-gradient(#d49ba3 0 var(--lovebrain-share,57.4%),var(--wine) var(--lovebrain-share,57.4%) 100%); }
.share-ring::before { grid-area: 1/1; width: 104px; height: 104px; border-radius: 50%; content: ""; background: #fff9f2; }.share-ring span { z-index: 1; display: grid; grid-area: 1/1; text-align: center; }
.share-ring strong { font: 520 1.7rem/1 Georgia,"Songti SC",serif; }.share-ring small { margin-top: 5px; color: #897b78; font-size: .62rem; }
.share-list { display: grid; gap: 13px; }.share-list p { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 9px; margin: 0; color: #766a68; font-size: .66rem; }
.share-list p i { width: 9px; height: 9px; border-radius: 50%; background: #d49ba3; }.share-list p:last-child i { background: var(--wine); }.share-list p strong { color: #493f40; font: 720 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.response-times { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(64,56,58,.1); }.response-times > div { display: grid; gap: 8px; text-align: center; }
.response-times span { color: #897b78; font-size: .59rem; line-height: 1.4; }.response-times strong { color: var(--wine); font: 520 1.65rem/1 Georgia,"Songti SC",serif; }.response-times > i { color: #d49ba3; font-style: normal; }
.data-card--language { background: linear-gradient(135deg,#f8f1ea 0%,#fff9f2 55%,#eedfd8 100%); }
.language-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,84px); }.language-grid h4 { margin: 0 0 20px; color: #766a68; font-size: .72rem; letter-spacing: .12em; }
.phrase-ranking { display: grid; gap: 0; }.phrase-ranking > div { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 34px; border-bottom: 1px solid rgba(64,56,58,.08); }
.phrase-ranking span,.phrase-ranking em { color: #9a8c88; font: 600 .58rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style: normal; }.phrase-ranking strong { font-size: .75rem; font-weight: 650; }
.phrase-ranking em { text-align: right; }
.exact-words { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; }.exact-words > span { display: flex; align-items: baseline; gap: 7px; padding: 10px 12px; border: 1px solid rgba(150,63,77,.14); border-radius: 99px; color: #574a4b; background: rgba(255,255,255,.65); }
.exact-words > span.is-favorite { color: #fff8f0; border-color: var(--wine); background: var(--wine); }.exact-words strong { font-size: .7rem; }.exact-words small { color: #9b8587; font-size: .52rem; }.exact-words .is-favorite small { color: rgba(255,255,255,.68); }
.stats-source-note { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 20px 24px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; color: #a9999d; background: rgba(255,255,255,.035); opacity: 0; transform: translateY(14px); transition: opacity 500ms ease,transform 600ms ease; }
.stats-source-note span { color: #e5a6ae; font: 760 .56rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .12em; }.stats-source-note p { margin: 0; font-size: .68rem; line-height: 1.7; }

/* Expanded archive charts */
.subchart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.subchart-head h4 { margin: 0; color: inherit; font-size: .76rem; letter-spacing: .1em; }
.subchart-head p { margin: 0; color: #968783; font-size: .64rem; }
.rhythm-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(34px,5vw,68px); }
.rhythm-grid > section + section { padding-left: clamp(30px,4vw,54px); border-left: 1px solid rgba(64,56,58,.1); }
.weekday-chart { display: grid; grid-template-columns: repeat(7,1fr); align-items: end; gap: 10px; height: 300px; padding-top: 34px; }
.weekday-chart > div { display: grid; grid-template-rows: 20px 1fr 20px; align-items: end; gap: 8px; height: 100%; text-align: center; }
.weekday-chart strong { color: #8d7f7b; font: 600 .54rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; opacity: 0; transition: opacity 180ms ease; }
.weekday-chart > div:hover strong,.weekday-chart > div.is-peak strong { opacity: 1; }
.weekday-chart i { display: block; height: var(--weekday-height); min-height: 8px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg,#d7a1a8,#9a4655); opacity: .66; }
.weekday-chart .is-peak i { background: linear-gradient(180deg,#f0c2ae,#a84658); box-shadow: 0 12px 28px rgba(150,63,77,.18); opacity: 1; }
.weekday-chart span { color: #776b68; font-size: .65rem; }
.daypart-chart { display: grid; gap: 25px; padding-top: 28px; }
.daypart-chart > div { display: grid; grid-template-columns: 58px minmax(0,1fr) 56px; align-items: center; gap: 12px; }
.daypart-chart > div > div { display: grid; gap: 5px; }.daypart-chart strong { font-size: .72rem; }.daypart-chart span,.daypart-chart small { color: #948784; font: 600 .54rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }.daypart-chart small { text-align: right; }
.daypart-chart i { display: flex; width: var(--daypart-width); min-width: 8%; height: 14px; overflow: hidden; border-radius: 99px; background: #e0d3cc; }.daypart-chart b { width: var(--sent-share); background: var(--wine); }.daypart-chart em { flex: 1; background: #d7a1a8; }
.data-card--streaks { color: #fff7ef; background: radial-gradient(circle at 84% 16%,rgba(218,151,160,.2),transparent 28%),#38262c; }
.data-card--streaks .data-card-head span { color: #efb4b8; }.data-card--streaks .data-card-head > p,.data-card--streaks .subchart-head p { color: #c7b4b8; }
.streak-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(34px,6vw,76px); align-items: stretch; }
.streak-summary { display: grid; gap: 10px; }.streak-summary article { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 5px 16px; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.1); }.streak-summary span { color: #d7bec2; font: 700 .55rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .08em; }.streak-summary strong { font: 500 1.75rem/1 Georgia,"Songti SC",serif; }.streak-summary small { grid-column: 1/-1; color: #aa969a; font-size: .62rem; }
.top-days-chart { display: grid; gap: 21px; padding-top: 6px; }.top-days-chart > div { display: grid; grid-template-columns: 24px 82px minmax(50px,1fr) 48px; align-items: center; gap: 10px; }.top-days-chart span,.top-days-chart em { color: #bda8ad; font: 600 .55rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style: normal; }.top-days-chart strong { font-size: .68rem; }.top-days-chart i { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }.top-days-chart b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#e5a6ae,#f2c1ad); }.top-days-chart em { text-align: right; }
.data-card--calls { color: #fff8f0; background: radial-gradient(circle at 15% 20%,rgba(229,166,174,.18),transparent 28%),linear-gradient(145deg,#30262b,#1f1a1d); }
.data-card--calls .data-card-head span { color: #efb4b8; }.data-card--calls .data-card-head > p,.data-card--calls .subchart-head p { color: #baa9ad; }
.call-layout { display: grid; grid-template-columns: .85fr 1.15fr; grid-template-rows: auto 1fr; gap: 28px 54px; }
.call-hero { display: grid; align-content: center; min-height: 180px; padding: 26px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: rgba(255,255,255,.055); }.call-hero > span { color: #d2bfc3; font: 700 .56rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .12em; }.call-hero > strong { margin: 18px 0 10px; color: #ffd8c6; font: 500 clamp(2.1rem,4vw,3.8rem)/.95 Georgia,"Songti SC",serif; letter-spacing: -.04em; }.call-hero small { color: #ad999e; font-size: .65rem; }.call-hero small b { color: #f5e8e1; }
.call-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.call-facts article { display: grid; min-width: 0; padding: 20px 16px; align-content: center; border-radius: 18px; background: rgba(255,255,255,.055); text-align: center; }.call-facts span,.call-facts small { color: #b9a5aa; font-size: .6rem; }.call-facts strong { margin: 11px 0 6px; font: 500 1.75rem/1 Georgia,"Songti SC",serif; }
.call-months { grid-column: 1/-1; }.call-month-chart { display: grid; grid-template-columns: repeat(23,1fr); align-items: end; gap: 5px; height: 170px; padding-top: 10px; }.call-month-chart > div { display: grid; grid-template-rows: 1fr 16px; gap: 7px; height: 100%; align-items: end; }.call-month-chart i { display: block; height: var(--call-height); min-height: 2px; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg,#e6aab2,#77444f); opacity: .7; }.call-month-chart .is-peak i { background: linear-gradient(180deg,#ffe0bf,#da8897); opacity: 1; }.call-month-chart span { color: #9e8d92; font: 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-align: center; }
.data-card--emoji { background: linear-gradient(140deg,#fff9f2,#eee0d6); }
.emoji-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(40px,7vw,88px); align-items: center; }
.emoji-orbit { display: grid; justify-items: center; text-align: center; }.emoji-ring { display: grid; width: 210px; height: 210px; place-items: center; border-radius: 50%; background: conic-gradient(var(--wine) 0 var(--emoji-share,30%),#d7a1a8 var(--emoji-share,30%) 100%); box-shadow: 0 18px 38px rgba(111,60,69,.15); }.emoji-ring::before { grid-area: 1/1; width: 148px; height: 148px; border-radius: 50%; content: ""; background: #fff8f0; }.emoji-ring span { z-index: 1; display: grid; grid-area: 1/1; gap: 6px; }.emoji-ring strong { font: 500 2.2rem/1 Georgia,"Songti SC",serif; }.emoji-ring small { color: #8b7d79; font-size: .63rem; }.emoji-orbit > p { margin: 20px 0 0; color: #6d605e; font-size: .7rem; line-height: 1.8; }.emoji-orbit > p strong { color: var(--wine); }.emoji-orbit > p span { color: #948784; }
.split-ranking { display: grid; gap: 17px; }.split-ranking > div { display: grid; grid-template-columns: 23px 54px minmax(0,1fr) 42px; align-items: center; gap: 9px; }.split-ranking span,.split-ranking small { color: #968783; font: 600 .54rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }.split-ranking strong { font-size: .68rem; }.split-ranking i { display: flex; height: 9px; overflow: hidden; border-radius: 99px; background: rgba(64,56,58,.07); }.split-ranking b { background: var(--wine); }.split-ranking em { background: #d7a1a8; }.split-ranking small { text-align: right; }.split-legend { display: flex; gap: 18px; margin-top: 22px; color: #897b78; font-size: .6rem; }.split-legend span { display: flex; align-items: center; gap: 7px; }.split-legend i { width: 16px; height: 4px; border-radius: 99px; background: var(--wine); }.split-legend span:last-child i { background: #d7a1a8; }
.data-card--money { background: linear-gradient(145deg,#f8ede3,#fffaf4); }
.money-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px 52px; }.money-summary { display: grid; grid-template-columns: repeat(3,1fr); grid-column: 1/-1; gap: 10px; }.money-summary article { display: grid; padding: 20px; border: 1px solid rgba(150,63,77,.1); border-radius: 18px; background: rgba(255,255,255,.62); }.money-summary span,.money-summary small { color: #8e807c; font-size: .6rem; }.money-summary strong { margin: 14px 0 8px; color: var(--wine); font: 500 clamp(1.45rem,3vw,2.25rem)/1 Georgia,"Songti SC",serif; }.money-summary small b { color: #5f5351; }
.money-balance-chart { display: grid; gap: 23px; padding-top: 12px; }.money-balance-chart > div { display: grid; grid-template-columns: 78px minmax(0,1fr) 80px; align-items: center; gap: 10px; }.money-balance-chart span { color: #776b68; font-size: .64rem; }.money-balance-chart i { height: 13px; overflow: hidden; border-radius: 99px; background: #e4d8d1; }.money-balance-chart b { display: block; height: 100%; border-radius: inherit; background: var(--wine); }.money-balance-chart .received b { background: #d49ba3; }.money-balance-chart strong { color: #5d5150; font: 650 .61rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-align: right; }
.packet-greeting { display: grid; align-content: center; margin: 0; padding: 28px; border-radius: 22px; color: #fff8f0; background: var(--wine); }.packet-greeting span,.packet-greeting small { color: rgba(255,255,255,.68); font-size: .61rem; }.packet-greeting p { margin: 16px 0 13px; font: 400 clamp(1.25rem,2.5vw,1.9rem)/1.3 Georgia,"Songti SC",serif; }.packet-greeting small b { color: #fff; }

@media (max-width: 900px) {
  .stats-overview { grid-template-columns: repeat(2,1fr); }
  .stats-split { grid-template-columns: 1fr; }
  .data-card--balance { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; }
  .data-card--balance .data-card-head { grid-column: 1/-1; }
  .response-times { margin: 0; padding: 0 0 0 28px; border-top: 0; border-left: 1px solid rgba(64,56,58,.1); }
}
@media (max-width: 680px) {
  .stats-section { padding: 92px 16px 88px; }.stats-heading { grid-template-columns: 1fr; margin-bottom: 58px; }.stats-heading h2 { font-size: clamp(3.3rem,14vw,4.8rem); }.stats-heading > p:last-child { margin-top: 28px; }
  .stats-overview { gap: 9px; }.stats-overview article { min-height: 145px; padding: 18px; }
  .data-card { padding: 24px 18px; border-radius: 23px; }.data-card-head { display: grid; gap: 12px; margin-bottom: 28px; }.data-card-head > p { max-width: none; text-align: left; }
  .year-row { grid-template-columns: 44px minmax(0,1fr) 64px; gap: 9px; }.language-grid { grid-template-columns: 1fr; gap: 40px; }
  .data-card--balance { display: block; }.response-times { margin-top: 28px; padding: 22px 0 0; border-top: 1px solid rgba(64,56,58,.1); border-left: 0; }
  .stats-source-note { grid-template-columns: 1fr; gap: 7px; }
}
@media (max-width: 430px) {
  #continue-to-stats { min-width: 0; width: 100%; }.stats-overview article { min-height: 132px; padding: 15px; }.stats-overview article strong { font-size: 1.65rem; }
  .share-visual { grid-template-columns: 126px 1fr; gap: 14px; }.share-ring { width: 122px; height: 122px; }.share-ring::before { width: 82px; height: 82px; }.share-ring strong { font-size: 1.35rem; }
  .hourly-chart { gap: 3px; height: 190px; }.phrase-ranking > div { grid-template-columns: 24px minmax(0,1fr) auto; gap: 8px; }.heatmap-note { flex-wrap: wrap; }.heatmap-note strong { flex-basis: 100%; margin: 7px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stats-section,.stats-section.is-visible,.stats-overview article,.data-card,.stats-source-note { animation: none; transition: none; opacity: 1; transform: none; }
  .stats-loading span { animation: none; }
}

/* Chapter two carousel */
.stats-carousel { width: 100%; min-width: 0; margin: auto; }
.stats-carousel-nav { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 80px); margin: 0 auto 12px; }
.stats-progress { display: flex; align-items: center; gap: 12px; margin: 0; color: #9f9094; font: 750 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .1em; }
.stats-progress > span:first-child { color: #fff8f0; font-size: 1rem; }
.stats-progress i { width: 54px; height: 1px; background: linear-gradient(90deg,#e5a6ae,rgba(229,166,174,.22)); }
.stats-arrows { display: flex; gap: 10px; }
.stats-arrows button { display: grid; width: 46px; height: 46px; padding: 0; place-items: center; border: 1px solid rgba(255,248,240,.25); border-radius: 50%; color: #fff8f0; background: rgba(255,255,255,.06); cursor: pointer; transition: color 220ms ease,background 220ms ease,border-color 220ms ease,transform 220ms ease,opacity 220ms ease; }
.stats-arrows button:hover:not(:disabled) { color: #1d1719; border-color: #efb4b8; background: #efb4b8; transform: translateY(-2px); }
.stats-arrows button:disabled { opacity: .3; cursor: default; }
.stats-arrows svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.stats-arrows button:focus-visible,.stats-dots button:focus-visible,.stats-viewport:focus-visible { outline: 3px solid rgba(239,180,184,.48); outline-offset: 3px; }
.stats-swipe-instruction { margin: 0 auto 10px; color: #a9999d; font-size: .7rem; text-align: center; }
.stats-swipe-instruction span { display: inline-block; margin-right: 7px; color: #e5a6ae; animation: swipe-nudge 2.2s ease-in-out infinite; }
.stats-viewport { width: 100%; min-width: 0; padding: 10px 0 42px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y; transition: height 520ms cubic-bezier(.2,.8,.2,1); }
.stats-viewport::-webkit-scrollbar { display: none; }
.stats-track { display: flex; width: 100%; min-width: 0; align-items: flex-start; }
.stats-slide { flex: 0 0 100%; width: 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.data-card.stats-slide,.stats-split.stats-slide { min-height: 620px; }
.stats-overview.stats-slide { min-height: 500px; align-content: stretch; }
.stats-split.stats-slide > .data-card { min-height: 100%; }
.stats-slide:not(.is-active) { opacity: .38; transform: scale(.968) translateY(10px); }
.stats-slide.is-active { opacity: 1; transform: none; }
.data-card.stats-slide { transition: opacity 480ms ease,transform 620ms cubic-bezier(.2,.8,.2,1); }
.stats-overview.stats-slide { transition: opacity 480ms ease,transform 620ms cubic-bezier(.2,.8,.2,1); }
.stats-carousel-foot { display: flex; justify-content: center; margin-top: -10px; }
.stats-dots { display: flex; align-items: center; gap: 9px; }
.stats-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,248,240,.28); cursor: pointer; transition: width 300ms ease,background 300ms ease; }
.stats-dots button.is-active { width: 34px; background: #efb4b8; }
.stats-source-note { margin-top: 28px; }

@media (max-width: 680px) {
  .stats-carousel-nav { width: 100%; padding: 0 4px; }
  .stats-viewport { width: 100%; margin-left: 0; padding: 8px 0 36px; }
  .stats-arrows button { width: 42px; height: 42px; }
  .stats-progress i { width: 38px; }
  .stats-track { align-items: stretch; }
  .data-card.stats-slide,.stats-split.stats-slide,.stats-overview.stats-slide { min-height: 660px; }
  .stats-split.stats-slide > .data-card { min-height: 0; }
  .stats-overview { grid-template-columns: 1fr; }
  .stats-overview article { min-height: 0; padding: 18px 20px; }
  .data-card { padding: 22px 17px; }
  .data-card-head { gap: 9px; margin-bottom: 22px; }
  .data-card-head h3 { margin-top: 8px; font-size: clamp(1.45rem,7vw,1.85rem); line-height: 1.08; }
  .data-card-head > p { font-size: .7rem; line-height: 1.45; }
  .yearly-bars { gap: 10px; margin-bottom: 24px; }
  .monthly-chart { min-width: 620px; }
  .stats-split { grid-template-rows: 1fr 1fr; gap: 14px; }
  .stats-split > .data-card { padding: 20px 17px; }
  .stats-split .data-card-head { margin-bottom: 18px; }
  .hourly-chart { height: 158px; }
  .share-visual { grid-template-columns: 118px 1fr; gap: 16px; }
  .share-ring { width: 114px; height: 114px; }.share-ring::before { width: 76px; height: 76px; }
  .response-times { margin-top: 18px; padding-top: 17px; }
  .language-grid { gap: 26px; }.language-grid h4 { margin-bottom: 12px; }
  .phrase-ranking > div { min-height: 29px; }
  .exact-words { gap: 7px; }.exact-words > span { padding: 8px 10px; }
  .rhythm-grid,.streak-layout,.call-layout,.emoji-layout,.money-layout { grid-template-columns: 1fr; gap: 22px; }
  .subchart-head { margin-bottom: 15px; }
  .rhythm-grid > section + section { padding: 22px 0 0; border-top: 1px solid rgba(64,56,58,.1); border-left: 0; }
  .weekday-chart { height: 185px; padding-top: 12px; gap: 6px; }.weekday-chart strong { display: none; }
  .daypart-chart { gap: 17px; padding-top: 0; }.daypart-chart > div { grid-template-columns: 48px minmax(0,1fr) 46px; gap: 8px; }
  .streak-summary { gap: 0; }.streak-summary article { padding: 12px 0; }
  .top-days-chart { gap: 14px; }.top-days-chart > div { grid-template-columns: 21px 72px minmax(34px,1fr) 42px; gap: 7px; }
  .call-layout { grid-template-rows: auto; }.call-hero { min-height: 138px; padding: 20px; }.call-hero > strong { margin: 13px 0 8px; }
  .call-facts { grid-template-columns: repeat(3,1fr); gap: 7px; }.call-facts article { padding: 13px 6px; }.call-facts strong { margin: 8px 0 5px; font-size: 1.35rem; }.call-months { grid-column: auto; }.call-month-chart { height: 118px; gap: 3px; }
  .emoji-ring { width: 150px; height: 150px; }.emoji-ring::before { width: 102px; height: 102px; }.emoji-ring strong { font-size: 1.7rem; }.emoji-orbit > p { margin-top: 14px; }
  .split-ranking { gap: 12px; }.split-ranking > div { grid-template-columns: 21px 50px minmax(0,1fr) 38px; gap: 6px; }.split-legend { margin-top: 15px; }
  .money-summary { grid-template-columns: 1fr; grid-column: auto; gap: 7px; }.money-summary article { grid-template-columns: 1fr auto; align-items: baseline; padding: 14px 16px; }.money-summary article strong { margin: 0; }.money-summary article small { grid-column: 1/-1; margin-top: 6px; }.money-balance-chart { gap: 16px; padding-top: 4px; }.packet-greeting { padding: 20px; }.packet-greeting p { margin: 12px 0 9px; }
  .stats-dots { gap: 7px; }.stats-dots button { width: 7px; height: 7px; }.stats-dots button.is-active { width: 25px; }
}

@media (max-width: 390px) {
  .stats-section { padding-inline: 12px; }
  .data-card { padding-inline: 15px; }
  .data-card.stats-slide,.stats-split.stats-slide,.stats-overview.stats-slide { min-height: 640px; }
  .stats-overview article { padding: 16px 18px; }
  .stats-arrows button { width: 40px; height: 40px; }
  .year-row { grid-template-columns: 38px minmax(0,1fr) 58px; gap: 7px; }
  .call-facts span,.call-facts small { font-size: .56rem; }
  .money-balance-chart > div { grid-template-columns: 70px minmax(0,1fr) 72px; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .stats-viewport,.stats-slide,.stats-arrows button,.stats-dots button { transition: none; }
  .stats-swipe-instruction span { animation: none; }
}

/* Chapter two vertical archive */
.stats-archive { width: 100%; min-width: 0; }
.stats-list { display: grid; min-width: 0; gap: clamp(24px,4vw,48px); }
.stats-list > * { min-width: 0; }
.stats-list > .stats-overview { margin-bottom: 4px; }
.stats-list > .data-card,.stats-list > .stats-split { min-height: 0; }
.stats-source-note { margin-top: clamp(24px,4vw,42px); }

@media (max-width: 680px) {
  .stats-list { gap: 20px; }
  .stats-overview { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .stats-overview article { min-height: 145px; padding: 18px; }
  .stats-split { grid-template-rows: auto; gap: 20px; }
  .stats-list .data-card { min-height: 0; }
  .stats-source-note { margin-top: 24px; }
}

@media (max-width: 430px) {
  .stats-overview article { min-height: 132px; padding: 15px; }
}