/* 纪念册 section: a page-flip sample book on a night table, then how the book is kept and how to reserve one. */
.memoir-page { position: relative; padding: 56px 0 96px; }
.memoir-head { max-width: 1000px; margin: 0 auto; text-align: center; }
.memoir-head .mono-label { display: inline-flex; align-items: center; gap: 10px; }
.memoir-badge { padding: 3px 9px; border-radius: 999px; font: 11px/1.4 var(--mono); letter-spacing: .08em; color: #1a1220; background: linear-gradient(120deg, #ffd58a, #ffb455); }
.mb-title { width: 100%; max-width: none; box-sizing: border-box; text-align: center; }
.memoir-head h1, .mb-title { margin: 18px 0 16px; font: 600 clamp(17px, 4.7vw, 46px)/1.25 var(--serif); letter-spacing: -.02em; color: #f6f3ff; white-space: nowrap; }
.memoir-head h1 em, .mb-title em { font-style: normal; background: linear-gradient(110deg, #ffd58a, #ffb2a0 55%, #c9b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.memoir-head > p { text-wrap: balance; max-width: 620px; margin: 0 auto; color: #b9c6e6; font-size: 16px; line-height: 1.85; }

/* ---- The stage ---- */
.memoir-showcase { position: relative; margin: 34px auto 0; padding: 26px 0 22px; border-radius: 28px; isolation: isolate; overflow: hidden;
  background: radial-gradient(ellipse 60% 55% at 50% 46%, rgba(255, 196, 120, .16), transparent 70%), radial-gradient(circle at 18% 12%, rgba(154, 140, 255, .18), transparent 40%), linear-gradient(180deg, #121733, #0b0e24 70%, #090b1c);
  border: 1px solid rgba(214, 222, 255, .12); }
.memoir-showcase::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image: radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 82% 14%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 66% 78%, #ffe7b8 50%, transparent 51%), radial-gradient(1px 1px at 30% 70%, #cfd8ff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 92% 58%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 46% 10%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 86%, #ffe7b8 50%, transparent 51%); }
.mb-dust { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mb-dust i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffd58a; box-shadow: 0 0 10px 2px rgba(255, 213, 138, .55); opacity: 0; animation: mb-rise 9s linear infinite; }
.mb-dust i:nth-child(1) { left: 14%; animation-delay: 0s; } .mb-dust i:nth-child(2) { left: 27%; animation-delay: 2.4s; width: 3px; height: 3px; }
.mb-dust i:nth-child(3) { left: 41%; animation-delay: 5.1s; } .mb-dust i:nth-child(4) { left: 58%; animation-delay: 1.2s; width: 3px; height: 3px; }
.mb-dust i:nth-child(5) { left: 71%; animation-delay: 3.7s; } .mb-dust i:nth-child(6) { left: 86%; animation-delay: 6.3s; width: 3px; height: 3px; }
@keyframes mb-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-560px) translateX(30px); opacity: 0; } }

.mb-stage { position: relative; width: min(100%, 980px); margin: 0 auto; padding: 14px 24px 34px; box-sizing: border-box; }
.mb-floor { position: absolute; left: 50%; bottom: 14px; width: min(80%, 820px); height: 40px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .6), transparent 70%); filter: blur(8px); pointer-events: none; }
.mb-book { position: relative; margin: 0 auto; }
.mb-book .stf__parent { margin: 0 auto; }

/* ---- Pages: paper, type and the binding ---- */
.mb-page { --ink: #33271f; --ink-soft: #7a6352; --accent: #a8452f; --gold: #b88a3e; overflow: hidden; color: var(--ink); font-size: calc(var(--pw, 400px) / 27); font-family: var(--serif);
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .6), transparent 70%), linear-gradient(170deg, #fbf6ec, #f2e8d5); }
.mb-page::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(120, 90, 60, .14) .5px, transparent .6px); background-size: 3px 3px; }
.mb-page.mb-left::after, .mb-page.mb-right::after { content: ''; position: absolute; top: 0; bottom: 0; width: 16%; pointer-events: none; }
.mb-page.mb-left::after { right: 0; background: linear-gradient(270deg, rgba(70, 45, 25, .22), rgba(70, 45, 25, .06) 30%, transparent); }
.mb-page.mb-right::after { left: 0; background: linear-gradient(90deg, rgba(70, 45, 25, .22), rgba(70, 45, 25, .06) 30%, transparent); }
.is-portrait .mb-page.mb-left::after { left: 0; right: auto; background: linear-gradient(90deg, rgba(70, 45, 25, .18), transparent 40%); }
.mb-page-inner { position: relative; z-index: 1; box-sizing: border-box; height: 100%; display: flex; flex-direction: column; padding: 11% 11% 13%; }
.mb-folio { position: absolute; z-index: 1; left: 0; right: 0; bottom: 5.5%; text-align: center; font: .78em/1 Georgia, var(--serif); letter-spacing: .1em; color: var(--ink-soft); }
.mb-folio::before, .mb-folio::after { content: '—'; margin: 0 .6em; opacity: .5; }
.mb-ornament { display: block; width: 7.5em; margin: 1.1em auto; fill: none; stroke: var(--gold); stroke-width: 1; }
.mb-ornament path:nth-child(2), .mb-ornament circle { fill: var(--gold); stroke: none; }

/* Two editions share the paper; each has its own accent. */
.mb-page.mb-book-couple { --accent: #b8455a; --accent-2: #e2953a; --tint: rgba(184, 69, 90, .08); }
.mb-page.mb-book-friend { --accent: #23806f; --accent-2: #e59a2f; --tint: rgba(35, 128, 111, .09); }
.mb-page.mb-book-drama { --accent: #d2385f; --accent-2: #7b5cff; --tint: rgba(210, 56, 95, .08); }
.mb-page.mb-book-cp { --accent: #6a4cff; --accent-2: #ff7aa8; --tint: rgba(106, 76, 255, .08); }

/* Content pages: a chapter tag, a title, then a scrapbook of the chat. */
.mb-k-content .mb-page-inner { padding: 9% 9.5% 12%; }
.mb-ch-no { margin: 0; font: .62em/1.4 var(--mono); letter-spacing: .22em; color: var(--accent); }
.mb-ch-title { margin: .2em 0 .7em; font-size: 1.42em; font-weight: 700; line-height: 1.3; color: #2a201b; }
.mb-caption { margin: auto 0 0; padding-top: .6em; font-size: .9em; line-height: 1.6; color: #4a3a30; }
.mb-caption::before { content: '✎ '; color: var(--accent); }
.mb-caption { background: linear-gradient(transparent 62%, rgba(255, 213, 138, .55) 62%) no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mb-tape { position: absolute; z-index: 2; top: 3.2%; width: 26%; height: 1.4em; opacity: .8; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 4px, transparent 4px 8px), var(--accent-2); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.mb-tape-l { right: 10%; transform: rotate(4deg); }
.mb-tape-r { right: -6%; top: -.6em; width: 34%; transform: rotate(-6deg); }

/* Before / after chat windows */
.mb-chatwin { padding: .6em .7em .7em; border-radius: .7em; background: #eef0f5; box-shadow: inset 0 0 0 1px rgba(60, 60, 90, .06); }
.mb-chat-when { margin: 0 0 .5em; text-align: center; font: .62em/1.3 var(--mono); color: #8a8fa3; }
.mb-b { width: fit-content; max-width: 84%; margin: 0 0 .4em; padding: .45em .75em; border-radius: .9em; font: .84em/1.5 var(--sans); }
.mb-b:last-child { margin-bottom: 0; }
.mb-b.them { background: #fff; border-bottom-left-radius: .25em; }
.mb-b.me { margin-left: auto; background: #a9e17a; border-bottom-right-radius: .25em; }
.mb-vs { margin: .45em 0; text-align: center; font-size: .7em; letter-spacing: .3em; color: var(--accent); }
.mb-vs::before, .mb-vs::after { content: '· · ·'; margin: 0 .8em; opacity: .5; letter-spacing: .1em; }

/* Nickname timeline */
.mb-names { margin: .2em 0 0; padding: 0 0 0 1.1em; list-style: none; border-left: 2px dashed rgba(120, 90, 60, .3); }
.mb-names li { position: relative; display: grid; grid-template-columns: 4.2em auto; gap: .1em .6em; align-items: baseline; padding: .42em 0; }
.mb-names li::before { content: ''; position: absolute; left: -1.5em; top: .95em; width: .6em; height: .6em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .2em #fbf6ec; }
.mb-names time { font: .64em var(--mono); color: #8a7563; }
.mb-names b { font-size: 1.05em; color: var(--accent); }
.mb-names span { grid-column: 2; font-size: .76em; color: #6f5c4d; }

/* Stats board, year-in-review style */
.mb-dash { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.mb-tile { padding: .55em .65em .6em; border-radius: .6em; }
.mb-tile.is-wide { grid-column: 1 / -1; }
.mb-tile b { display: block; font: 700 1.6em/1.05 Georgia, var(--serif); color: #2a201b; }
.mb-tile.is-wide b { font-size: 2.1em; }
.mb-tile span { display: block; margin-top: .1em; font-size: .76em; font-weight: 600; color: #3b2f2a; }
.mb-tile small { display: block; margin-top: .25em; font-size: .64em; line-height: 1.45; color: #6f5c4d; }
.t-rose { background: #fbe0e3; } .t-sun { background: #fff0c4; } .t-sky { background: #dceaff; } .t-lilac { background: #ebe2ff; } .t-mint { background: #d6f2e7; }

/* Cold-war forecast */
.mb-weather-title { margin: 0 0 .5em; font-size: .86em; color: #4a3a30; }
.mb-weather-title b { font-size: 1.3em; color: var(--accent); }
.mb-weather { margin: 0; padding: 0; list-style: none; border-radius: .7em; overflow: hidden; background: #eef3fb; }
.mb-weather li { display: grid; grid-template-columns: 3.2em 1.8em 3.6em 1fr; align-items: center; gap: .3em; padding: .5em .7em; font-size: .84em; }
.mb-weather li + li { border-top: 1px solid rgba(80, 100, 140, .12); }
.mb-weather li:last-child { background: #fff6d9; }
.mb-weather time { font: .78em var(--mono); color: #7a8299; }
.mb-weather i { font-style: normal; font-size: 1.2em; }
.mb-weather b { font-weight: 600; color: #3b4660; }
.mb-weather span { color: #4a3a30; }

/* Quote cards */
.mb-qcard { position: relative; margin: 0 0 .6em; padding: .7em .9em; border-radius: .4em; background: #fff; box-shadow: 0 .25em .7em rgba(80, 60, 40, .12); }
.mb-qcard.q0 { transform: rotate(-1.2deg); } .mb-qcard.q1 { transform: rotate(1deg); margin-left: 6%; background: var(--tint); } .mb-qcard.q2 { transform: rotate(-.6deg); }
.mb-qcard blockquote { margin: 0; font-size: 1.02em; font-weight: 600; line-height: 1.55; color: #2a201b; }
.mb-qcard figcaption { margin-top: .35em; font-size: .7em; color: #8a7563; }

/* Secret dictionary */
.mb-dict { margin: 0; }
.mb-dict dt { display: flex; align-items: baseline; gap: .5em; margin-top: .75em; font-size: 1.1em; font-weight: 700; color: var(--accent); }
.mb-dict dt:first-child { margin-top: 0; }
.mb-dict dt small { font: .6em var(--sans); font-weight: 400; letter-spacing: .04em; color: #8a7563; }
.mb-dict dd { margin: .2em 0 0; padding-left: .8em; border-left: 2px solid var(--tint); font-size: .86em; line-height: 1.6; color: #3b2f2a; }

/* Persona cards, like collectible game cards */
.mb-persona { display: grid; gap: .6em; }
.mb-pcard { position: relative; padding: .6em .8em .7em; border-radius: .7em; color: #2a201b; background: linear-gradient(140deg, #fff, var(--tint)); box-shadow: inset 0 0 0 1.5px var(--accent), 0 .25em .6em rgba(80, 60, 40, .1); }
.mb-pcard header { display: flex; align-items: center; justify-content: space-between; }
.mb-pcard header b { font-size: 1.2em; }
.mb-pcard header i { padding: .05em .55em; border-radius: .4em; font: italic 700 .7em Georgia, serif; color: #fff; background: linear-gradient(120deg, var(--accent-2), var(--accent)); }
.mb-ptitle { margin: .15em 0 .35em; font-size: .8em; font-weight: 600; color: var(--accent); }
.mb-pcard ul { margin: 0; padding: 0; list-style: none; }
.mb-pcard li { font-size: .76em; line-height: 1.65; }
.mb-pcard em { display: inline-block; width: 2.6em; font-style: normal; font-size: .9em; color: #8a7563; }

/* Feelings curve */
.mb-curve { display: block; width: 100%; margin: .3em 0; overflow: visible; }
.mb-curve-area { fill: var(--tint); }
.mb-curve-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.mb-curve-dot { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.mb-curve text { font: 600 8.5px var(--sans); fill: #4a3a30; }

/* 「在吗」 archive */
.mb-zaima { margin: 0; padding: 0; list-style: none; }
.mb-zaima li { margin-bottom: .5em; padding: .45em .7em; border-radius: .5em; background: #fff; box-shadow: 0 .15em .4em rgba(80, 60, 40, .08); }
.mb-zaima time { display: block; font: .6em var(--mono); color: #8a8fa3; }
.mb-zaima p { margin: .1em 0; font-size: .86em; color: #2a201b; }
.mb-zaima p b { padding: 0 .35em; border-radius: .3em; color: #fff; background: var(--accent); }
.mb-zaima span { font-size: .76em; color: var(--accent); }

/* Prose: one night told as a story */
.mb-prose p { margin: 0 0 .6em; text-indent: 2em; text-align: justify; font-size: .98em; line-height: 1.9; letter-spacing: .02em; }
.mb-prose p.mb-first { text-indent: 0; display: flow-root; }
.mb-prose p.mb-first::first-letter { float: left; margin: .08em .14em 0 0; font-size: 2.6em; line-height: .95; font-weight: 700; color: var(--accent); }

/* Fun facts */
.mb-trivia { margin: 0; padding: 0; list-style: none; }
.mb-trivia li { display: flex; gap: .6em; align-items: flex-start; padding: .55em 0; border-bottom: 1px dashed rgba(120, 90, 60, .3); font-size: .86em; line-height: 1.55; }
.mb-trivia i { flex-shrink: 0; font-style: normal; font-size: 1.15em; }

/* Title page and contents */
.mb-k-title .mb-page-inner { align-items: center; justify-content: center; text-align: center; }
.mb-title-kicker { margin: 0 0 2.2em; font: .58em/1.4 var(--mono); letter-spacing: .24em; color: var(--ink-soft); }
.mb-title-name { margin: 0; font-size: 1.9em; font-weight: 700; line-height: 1.35; letter-spacing: .04em; }
.mb-title-sub { margin: .7em 0 0; font-size: .9em; letter-spacing: .14em; color: var(--ink-soft); }
.mb-title-authors { margin: 1em 0 0; font-size: 1.1em; letter-spacing: .3em; }
.mb-title-press { margin: auto 0 0; padding-top: 2em; font-size: .72em; letter-spacing: .24em; color: var(--ink-soft); }
.mb-toc-head { margin: .4em 0 0; text-align: center; font-size: 1.4em; font-weight: 700; letter-spacing: .5em; text-indent: .5em; }
.mb-toc { margin: .2em 0 0; padding: 0; list-style: none; }
.mb-toc li { display: flex; align-items: baseline; gap: .7em; padding: .4em 0; border-bottom: 1px dotted rgba(120, 90, 60, .4); font-size: .92em; }
.mb-toc span { flex-shrink: 0; font: .78em var(--mono); color: var(--accent); }
.mb-toc b { font-weight: 500; }
.mb-toc i { margin-left: auto; font: normal .82em Georgia, var(--serif); color: var(--ink-soft); }

/* Letter */
.mb-letter-body { padding-top: .2em; background: repeating-linear-gradient(180deg, transparent 0 calc(2.05em - 1px), rgba(120, 90, 60, .2) calc(2.05em - 1px) 2.05em); }
.mb-letter-body p { margin: 0; font-size: 1em; line-height: 2.05; }
.mb-letter-body .mb-indent { text-indent: 2em; }
.mb-letter-sign { margin-top: .6em !important; text-align: right; }
.mb-seal-stamp { position: absolute; right: 9%; bottom: 13%; display: grid; place-items: center; width: 4.6em; height: 4.6em; margin: 0; border-radius: 50%; text-align: center; font-size: .7em; font-weight: 700; line-height: 1.35; color: #fff3dc;
  background: radial-gradient(circle at 35% 30%, #d9684f, #9c3324); box-shadow: 0 .3em .8em rgba(120, 40, 20, .35), inset 0 0 0 .22em rgba(255, 220, 190, .35); transform: rotate(-12deg); }

/* Colophon */
.mb-k-colophon .mb-page-inner { justify-content: flex-end; }
dl.mb-colophon { display: grid; grid-template-columns: auto 1fr; gap: .55em 1.2em; margin: 0; font-size: .82em; }
.mb-colophon dt { color: var(--ink-soft); letter-spacing: .2em; }
.mb-colophon dd { margin: 0; }
.mb-colophon-note { margin: 0; text-align: center; font-size: .7em; line-height: 1.8; color: var(--ink-soft); }

/* Endpapers: the inside of the covers, with the gift inscription */
.mb-page.mb-k-endpaper { color: #f3ead6; background: radial-gradient(circle at 30% 20%, rgba(255, 213, 138, .14), transparent 50%), #262457; }
.mb-page.mb-k-endpaper::before { opacity: .55; background-image: radial-gradient(rgba(255, 223, 168, .55) .8px, transparent 1px), radial-gradient(rgba(201, 184, 255, .4) .6px, transparent .8px); background-size: 26px 26px, 17px 17px; background-position: 0 0, 9px 13px; }
.mb-k-endpaper .mb-page-inner { justify-content: center; }
.mb-inscribe { padding: 1.6em 1.4em; border-radius: .4em; color: var(--ink); background: linear-gradient(170deg, #fbf6ec, #efe2c8); box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .3); transform: rotate(-1.5deg); }
.mb-inscribe-to { margin: 0; font-size: 1em; }
.mb-inscribe-text { margin: .9em 0; font-size: 1.12em; line-height: 2; text-indent: 2em; }
.mb-inscribe-from { margin: 0; text-align: right; font-size: .85em; color: var(--ink-soft); }
.mb-inscribe-note { margin: 1.6em 0 0; text-align: center; font-size: .66em; letter-spacing: .14em; color: rgba(243, 234, 214, .7); }
.mb-end-mark { margin: auto; font-size: .8em; letter-spacing: .6em; color: rgba(243, 234, 214, .75); }

/* Covers: cloth, an inset gold frame and foil type */
.mb-page.mb-k-cover { color: #f4f2ff; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 4px), radial-gradient(circle at 28% 18%, #3e3a86, transparent 55%), radial-gradient(circle at 80% 92%, #50295a, transparent 50%), linear-gradient(160deg, #1d2160, #0c1038); }
.mb-page.mb-k-cover::before { display: none; }
.mb-k-cover .mb-page-inner { align-items: center; justify-content: center; text-align: center; }
.mb-cover-frame { position: absolute; inset: 5%; border: 1px solid rgba(255, 214, 150, .5); border-radius: 3px; box-shadow: inset 0 0 0 4px rgba(255, 214, 150, .08); pointer-events: none; }
.mb-cover-stars { position: absolute; top: 12%; left: 50%; width: 58%; transform: translateX(-50%); opacity: .85; }
.mb-cover-stars path { fill: none; stroke: rgba(255, 213, 138, .5); stroke-width: 1; stroke-dasharray: 3 4; }
.mb-cover-stars circle { fill: #ffe2a8; filter: drop-shadow(0 0 4px rgba(255, 213, 138, .9)); }
.mb-cover-kicker { margin: 5em 0 0; font: .66em/1 var(--mono); letter-spacing: .32em; color: #ffdfa8; }
.mb-foil { margin: .6em 0 .3em; font-size: 2.5em; font-weight: 700; line-height: 1.22; letter-spacing: .05em;
  background: linear-gradient(110deg, #b8873b 0%, #ffe3a3 22%, #c9963f 40%, #fff3cc 52%, #c08a3c 68%, #ffe3a3 84%, #b8873b 100%); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: mb-foil 7s linear infinite; }
.mb-foil b { font-size: 1.5em; font-family: Georgia, var(--serif); }
@keyframes mb-foil { to { background-position: -260% 0; } }
.mb-cover-sub { margin: 0; font-size: .82em; letter-spacing: .26em; color: #d9cffd; }
.mb-cover-names { margin: 1.4em 0 0; font-size: 1.1em; font-weight: 600; letter-spacing: .2em; }
.mb-cover-foot { position: absolute; left: 0; right: 0; bottom: 9%; margin: 0; font-size: .66em; letter-spacing: .2em; color: #b9c6e6; }
.mb-page.mb-k-cover.mb-book-couple { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 4px), radial-gradient(circle at 26% 16%, #7a3a6e, transparent 55%), radial-gradient(circle at 82% 92%, #5a2240, transparent 50%), linear-gradient(160deg, #3a1d4f, #160f30); }
.mb-page.mb-k-cover.mb-book-friend { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 4px), radial-gradient(circle at 26% 16%, #2f8a7a, transparent 55%), radial-gradient(circle at 82% 92%, #8a6a1c, transparent 50%), linear-gradient(160deg, #0f4a48, #0a2430); }
.mb-page.mb-k-cover.mb-book-friend .mb-cover-sub { color: #cdeee4; }
.mb-page.mb-k-endpaper.mb-book-couple { background: radial-gradient(circle at 30% 20%, rgba(255, 190, 170, .16), transparent 50%), #3a1d4f; }
.mb-page.mb-k-endpaper.mb-book-friend { background: radial-gradient(circle at 30% 20%, rgba(255, 220, 140, .16), transparent 50%), #0f4a48; }
.mb-page.mb-k-cover.mb-book-drama { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px), radial-gradient(circle at 24% 14%, #c23a6a, transparent 52%), radial-gradient(circle at 84% 90%, #4b39c9, transparent 50%), linear-gradient(165deg, #2a0f36, #0b0a24); }
.mb-page.mb-k-endpaper.mb-book-drama { background: radial-gradient(circle at 30% 20%, rgba(255, 120, 170, .18), transparent 50%), #22102f; }
.mb-page.mb-k-cover.mb-book-cp { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 6px), radial-gradient(circle at 22% 16%, #8a5cff, transparent 52%), radial-gradient(circle at 84% 88%, #ff6a9a, transparent 48%), linear-gradient(160deg, #241452, #0d0b2a); }
.mb-page.mb-k-endpaper.mb-book-cp { background: radial-gradient(circle at 30% 20%, rgba(180, 150, 255, .2), transparent 50%), #1f1648; }

/* CP 档案: a profile sheet and ranked lines. */
.mb-cp-info { display: grid; grid-template-columns: 4.6em 1fr; margin: .2em 0 0; border-top: 2px solid var(--accent); }
.mb-cp-info dt, .mb-cp-info dd { margin: 0; padding: .5em 0; border-bottom: 1px dashed rgba(120, 90, 60, .3); font-size: .84em; line-height: 1.5; }
.mb-cp-info dt { font-weight: 700; color: var(--accent); }
.mb-cp-info dd { color: #2a201b; }
.mb-rank { margin: 0; padding: 0; list-style: none; }
.mb-rank li { display: flex; gap: .7em; align-items: flex-start; padding: .5em 0; border-bottom: 1px dashed rgba(120, 90, 60, .3); }
.mb-rank b { flex-shrink: 0; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; font: 700 .8em/1 var(--mono); color: #fff; background: linear-gradient(135deg, #ff6a8e, #ff9a6a); }
.mb-rank.t-blade b { background: linear-gradient(135deg, #44506e, #2a3048); }
.mb-rank p { margin: 0; font-size: .9em; line-height: 1.5; color: #2a201b; }
.mb-rank small { display: block; margin-top: .15em; font-size: .78em; color: #8a7a6c; }

/* 连续剧版: an episode card — EP number, title, a sticker tag, a short narration, the real lines. */
.mb-ep-no { margin: 0; font: .62em/1.4 var(--mono); letter-spacing: .16em; color: var(--accent); }
.mb-ep-title { margin-bottom: .35em; }
.mb-ep-tag { align-self: flex-start; margin: 0 0 .6em; padding: .18em .65em; border-radius: 999px; font-size: .68em; font-weight: 700; letter-spacing: .06em; color: #fff; background: #d2385f; transform: rotate(-2deg); }
.mb-ep-tag.t-sweet { background: linear-gradient(90deg, #ff6a8e, #ff9a6a); }
.mb-ep-tag.t-tease { background: linear-gradient(90deg, #8a6cff, #d26cff); }
.mb-ep-tag.t-alert { color: #2a1a00; background: repeating-linear-gradient(-45deg, #ffd23f 0 8px, #ffe27a 8px 16px); }
.mb-ep-tag.t-blade { background: linear-gradient(90deg, #44506e, #2a3048); }
.mb-ep-story p { margin: 0 0 .5em; font-size: .9em; line-height: 1.75; color: #3a2e27; }
.mb-ep-chat { margin-top: .5em; padding: .8em .8em .9em; }
.mb-ep-chat .mb-b { font-size: .92em; margin-bottom: .55em; }
.mb-b.sys { width: auto; max-width: none; margin: .2em auto .5em; padding: .15em .6em; text-align: center; font-size: .66em; color: #8a8fa3; background: rgba(0, 0, 0, .05); border-radius: .4em; }

/* 「我搜了一下关键词」: chat-search results. */
.mb-search { margin: 0; padding: 0; list-style: none; }
.mb-search li { padding: .5em 0; border-bottom: 1px dashed rgba(120, 90, 60, .3); }
.mb-search-q { display: flex; align-items: center; gap: .45em; width: fit-content; margin: 0 0 .3em; padding: .2em .7em; border-radius: 999px; background: #eef0f5; font-size: .8em; font-weight: 700; color: #2a201b; }
.mb-search-q i { font-style: normal; font-size: .9em; }
.mb-search span { display: block; font-size: .82em; line-height: 1.55; color: #4a3a30; }
.mb-inscribe { position: relative; }
.mb-backcover .mb-back-line { margin: 0; font-size: 1.4em; font-weight: 600; line-height: 1.9; letter-spacing: .08em; }

/* Controls under the book */
.mb-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 4px; padding: 0 16px; }
.mb-btn { min-width: 44px; height: 40px; padding: 0 16px; border: 1px solid rgba(214, 222, 255, .22); border-radius: 999px; color: #e8ecff; background: rgba(20, 24, 56, .7); font: 14px var(--sans); cursor: pointer; transition: background .25s, border-color .25s; }
.mb-btn:hover:not(:disabled) { border-color: rgba(255, 213, 138, .6); background: rgba(40, 36, 80, .8); }
.mb-btn:disabled { opacity: .35; cursor: default; }
.mb-btn.is-on { color: #1a1220; border-color: transparent; background: linear-gradient(120deg, #ffd58a, #ffb455); }
.mb-progress { position: relative; width: min(260px, 40vw); height: 3px; border-radius: 3px; background: rgba(214, 222, 255, .18); overflow: hidden; }
.mb-progress::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--progress, 0%); border-radius: 3px; background: linear-gradient(90deg, #ffd58a, #ffb2a0); transition: width .6s ease; }
.mb-label { flex-basis: 100%; margin: 0; text-align: center; font: 13px/1.5 var(--serif); letter-spacing: .06em; color: #c2cdea; }
.mb-sample-note { margin: 12px 0 0; padding: 0 16px; text-align: center; font-size: 12.5px; color: #7f89b0; }

/* ---- Below the book ---- */
.memoir-block { margin-top: 84px; }
.memoir-block-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.memoir-block-head h2 { margin: 10px 0 0; font: 600 clamp(24px, 3vw, 34px)/1.3 var(--serif); color: #f4f2ff; }
.memoir-block-head h2 em { font-style: normal; color: #ffd58a; }
.memoir-block-head p { max-width: 380px; margin: 0; color: #9aa6cc; font-size: 14px; line-height: 1.7; }
.memoir-keep { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.memoir-keep article { position: relative; padding: 26px 24px 24px; border-radius: 22px; border: 1px solid rgba(214, 222, 255, .14); background: linear-gradient(160deg, rgba(36, 42, 92, .55), rgba(14, 17, 44, .7)); overflow: hidden; }
.memoir-keep article::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 213, 138, .14), transparent 70%); }
.memoir-keep svg { width: 42px; height: 42px; }
.memoir-keep h3 { margin: 16px 0 8px; font: 600 19px/1.4 var(--serif); color: #f4f2ff; }
.memoir-keep p { margin: 0; color: #b4bfdf; font-size: 14px; line-height: 1.75; }
.memoir-keep ul { margin: 14px 0 0; padding: 0; list-style: none; }
.memoir-keep li { position: relative; padding-left: 16px; margin-top: 6px; color: #9aa6cc; font-size: 13px; line-height: 1.6; }
.memoir-keep li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #ffd58a; }
.memoir-tag { position: absolute; right: 18px; top: 20px; padding: 3px 9px; border-radius: 999px; font: 11px/1.4 var(--mono); color: #ffd58a; border: 1px solid rgba(255, 213, 138, .4); }
.memoir-steps { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: memoir-step; border: 1px solid rgba(214, 222, 255, .14); border-radius: 22px; overflow: hidden; }
.memoir-steps li { list-style: none; position: relative; padding: 26px 26px 28px; background: rgba(14, 17, 44, .55); }
.memoir-steps li + li { border-left: 1px solid rgba(214, 222, 255, .12); }
.memoir-steps li::before { counter-increment: memoir-step; content: '0' counter(memoir-step); display: block; font: 600 30px/1 Georgia, var(--serif); color: rgba(255, 213, 138, .85); }
.memoir-steps strong { display: block; margin: 14px 0 8px; font: 600 17px/1.4 var(--serif); color: #f4f2ff; }
.memoir-steps span { color: #a9b4d6; font-size: 14px; line-height: 1.75; }
.memoir-occasions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.memoir-occasions span { padding: 8px 16px; border-radius: 999px; font-size: 13.5px; color: #e4e8ff; background: rgba(154, 140, 255, .14); border: 1px solid rgba(154, 140, 255, .28); }
.memoir-reserve { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; margin-top: 84px; padding: 40px 44px; border-radius: 28px; border: 1px solid rgba(255, 213, 138, .32);
  background: radial-gradient(circle at 85% 30%, rgba(255, 213, 138, .16), transparent 45%), linear-gradient(130deg, #1e2350, #10132f); }
.memoir-reserve h2 { margin: 10px 0 12px; font: 600 clamp(24px, 3vw, 32px)/1.35 var(--serif); color: #fff6e2; }
.memoir-reserve p { margin: 0; color: #c2cdea; font-size: 15px; line-height: 1.8; }
.memoir-reserve ol { margin: 16px 0 0; padding-left: 20px; color: #e4e8ff; font-size: 14.5px; line-height: 1.9; }
.memoir-reserve ol b { color: #ffd58a; font-weight: 600; }
.memoir-reserve small { display: block; margin-top: 14px; color: #8d97bf; font-size: 12.5px; line-height: 1.7; }
.memoir-qr { margin: 0; text-align: center; }
.memoir-qr img { display: block; width: 168px; height: 168px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.memoir-qr figcaption { margin-top: 10px; font-size: 12.5px; color: #b9c6e6; }
.memoir-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.memoir-faq details { padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(214, 222, 255, .12); background: rgba(14, 17, 44, .5); }
.memoir-faq summary { cursor: pointer; color: #eef1ff; font-size: 15px; font-weight: 600; }
.memoir-faq p { margin: 10px 0 0; color: #a9b4d6; font-size: 14px; line-height: 1.75; }

@media (max-width: 860px) {
  .memoir-keep, .memoir-steps { grid-template-columns: 1fr; }
  .memoir-steps li + li { border-left: 0; border-top: 1px solid rgba(214, 222, 255, .12); }
  .memoir-block-head { display: block; }
  .memoir-block-head p { margin-top: 10px; }
  .memoir-reserve { grid-template-columns: 1fr; padding: 30px 24px; }
  .memoir-qr { justify-self: center; }
  .memoir-faq { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .memoir-page { padding-top: 32px; }
  .memoir-head > p { font-size: 15px; }
  .memoir-showcase { margin-left: -6px; margin-right: -6px; border-radius: 22px; }
  .memoir-block, .memoir-reserve { margin-top: 60px; }
}
@media (max-width: 420px) { .site-nav-item { padding: 7px 3px; font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) {
  .mb-foil, .mb-dust i { animation: none; }
}
.site-nav-new { position: relative; top: -7px; margin-left: 3px; padding: 1px 4px; border-radius: 6px; font: 700 8.5px/1.3 var(--mono); font-style: normal; letter-spacing: .04em; color: #1a1220; background: linear-gradient(120deg, #ffd58a, #ffb455); }
@media (max-width: 760px) { .site-nav-new { position: absolute; top: 3px; right: 2px; width: 6px; height: 6px; padding: 0; overflow: hidden; border-radius: 50%; font-size: 0; } }
.memoir-price { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0 !important; }
.memoir-price b { font: 700 30px/1.1 Georgia, var(--serif); color: #ffd58a; }
.memoir-price span { font-size: 12.5px; color: #8d97bf; }
.memoir-keep article.is-gift { border-color: rgba(255, 213, 138, .5); background: radial-gradient(circle at 85% 0%, rgba(255, 213, 138, .18), transparent 55%), linear-gradient(160deg, rgba(56, 48, 110, .7), rgba(18, 18, 50, .8)); }
.memoir-more { display: inline-block; margin-top: 16px; color: #c9b8ff; font-size: 14px; text-decoration: none; border-bottom: 1px solid rgba(201, 184, 255, .4); }
.memoir-more:hover { color: #ffd58a; border-color: rgba(255, 213, 138, .6); }
/* Phones show one page at a time, so the type can be a little larger. */
.is-portrait .mb-page { font-size: calc(var(--pw, 320px) / 25.5); }
.is-portrait .mb-prose p { line-height: 1.8; }
.is-portrait .mb-page-inner { padding: 10% 9% 12%; }
/* 情侣版 / 朋友版 switch above the book */
.mb-versions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 4px; }
.mb-version { padding: 8px 18px; border: 1px solid rgba(214, 222, 255, .22); border-radius: 999px; color: #c2cdea; background: rgba(20, 24, 56, .6); font: 14px var(--sans); cursor: pointer; transition: background .25s, color .25s; }
.mb-version.is-on { color: #1a1220; border-color: transparent; background: linear-gradient(120deg, #ffd58a, #ffb2a0); font-weight: 600; }
/* 「TA 的使用说明书」 */
.mb-manual { display: grid; gap: .55em; }
.mb-manual article { padding: .55em .75em .6em; border-radius: .6em; background: #fff; box-shadow: 0 .2em .55em rgba(80, 60, 40, .1); }
.mb-manual article:nth-child(2) { background: var(--tint); }
.mb-manual h5 { margin: 0 0 .3em; font-size: .92em; font-weight: 700; color: var(--accent); }
.mb-manual ul { margin: 0; padding: 0; list-style: none; }
.mb-manual li { display: grid; grid-template-columns: 1.4em 3.4em 1fr; align-items: baseline; font-size: .76em; line-height: 1.6; }
.mb-manual li i { font-style: normal; }
.mb-manual li em { font-style: normal; color: #8a7563; }
.mb-manual li span { color: #2a201b; }
/* 「我们的照片墙」: polaroids with illustrated stand-ins, and an empty slot for the reader's own photo. */
.mb-polaroids { display: grid; grid-template-columns: 1fr 1fr; gap: .7em .6em; padding: .2em .2em 0; }
.mb-polaroid { position: relative; margin: 0; padding: .4em .4em .3em; background: #fff; box-shadow: 0 .3em .8em rgba(60, 40, 20, .18); }
.mb-polaroid.p0 { transform: rotate(-3deg); } .mb-polaroid.p1 { transform: rotate(2.5deg); } .mb-polaroid.p2 { transform: rotate(1.5deg); }
.mb-polaroid-add { transform: rotate(-2deg); background: rgba(255, 255, 255, .55); box-shadow: none; outline: 1.5px dashed rgba(120, 90, 60, .45); outline-offset: -2px; }
.mb-photo { display: grid; place-items: center; aspect-ratio: 1; border-radius: 2px; }
.mb-photo span { font-size: 2.1em; filter: drop-shadow(0 .1em .2em rgba(0, 0, 0, .2)); }
.mb-photo.s-dusk { background: linear-gradient(170deg, #ffb48a, #f07a8a 55%, #7a5ab8); }
.mb-photo.s-night { background: radial-gradient(circle at 70% 25%, rgba(255, 230, 160, .7) 0 4%, transparent 5%), linear-gradient(180deg, #1d2160, #4b3a8a); }
.mb-photo.s-day { background: linear-gradient(180deg, #a8d8ff, #fde7b0); }
.mb-polaroid-add .mb-photo { background: repeating-linear-gradient(45deg, rgba(120, 90, 60, .06) 0 6px, transparent 6px 12px); }
.mb-polaroid-add .mb-photo span { font-size: 1.8em; color: var(--accent); filter: none; }
.mb-polaroid figcaption { margin-top: .3em; text-align: center; font-size: .62em; line-height: 1.4; color: #4a3a30; }
.mb-k-toc .mb-ornament { margin: .5em auto .3em; }