@font-face { font-family: "Aurora Letter Serif"; src: url('/assets/aurora/fonts/letters/NotoSerifSC-letter-title.ttf') format('truetype'); font-weight: 400; font-display: swap; }
/* 此页独立使用 Yohaku 的暖纸与中性色阶；不修改博客主题。
   配色参考 https://github.com/Innei/Yohaku/tree/main/design-system (MIT)。 */
:root {
	--album-duration: 850ms;
	--album-ease: cubic-bezier(.22,1,.36,1);
	--album-paper: #fefefb;
	--album-surface: #f9f8f5;
	--album-hover: #f0efeb;
	--album-pressed: #e3e1db;
	--album-border: #d0cec6;
	--album-secondary: #5c5a55;
	--album-ink: #24231f;
	--album-accent: #33a6b8;
	--album-error: #a64953;
	--season-paper: var(--album-paper);
	--album-serif: "Aurora Letter Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
	--cover-paper: #c6ab7a; --cover-ink: #4a3422;
	--page-bg: var(--album-paper); --deep-text: var(--album-ink); --content-meta: var(--album-secondary);
	--line-divider: var(--album-pressed); --primary: var(--album-accent);
	--btn-content: var(--album-secondary); --btn-regular-bg: transparent;
	--btn-regular-bg-hover: var(--album-hover); --btn-regular-bg-active: var(--album-pressed);
	--guestbook-editor-line: var(--album-border); --guestbook-editor-bg: var(--album-surface);
	--guestbook-editor-text: var(--album-ink); --guestbook-editor-muted: var(--album-secondary);
	--guestbook-focus: var(--album-secondary);
	--selection-bg: color-mix(in srgb, var(--album-accent) 19%, var(--album-paper));
	--desk: var(--album-paper); --ink: var(--album-ink); --muted: var(--album-secondary);
	--edge: var(--album-border); --accent: var(--album-accent);
}
body { background: var(--season-paper); color: var(--deep-text); font: 14px/1.65 var(--ui); isolation: isolate; scrollbar-color: var(--album-border) var(--album-paper); transition: background-color 1400ms var(--album-ease); }
/* 纸纹与自然粒子留在底层，不给纸面和控件叠加滤镜。 */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: url('/previews/letter-materials/fibers.png') repeat; background-size: 384px; mix-blend-mode: multiply; opacity: .11; filter: grayscale(1); }
.album-weather { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; color: var(--primary); }
::selection { background: var(--selection-bg); color: var(--deep-text); }
:focus-visible { outline: 2px solid var(--guestbook-focus); outline-offset: 2px; }
.album-header { width: min(1120px, 100%); min-height: 88px; margin: auto; padding: 24px 36px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.album-header a:first-child { font: 400 24px/1.3 Georgia, "Times New Roman", serif; letter-spacing: -.025em; text-decoration: none; }
.album-header a:last-child { padding: 8px 0; font-size: 12px; color: var(--muted); text-decoration-color: var(--album-border); transition: color 180ms var(--album-ease), text-decoration-color 180ms var(--album-ease); }
.album-header a:last-child:hover { color: var(--ink); text-decoration-color: currentColor; }
.album-header__tools { display: flex; align-items: center; gap: 24px; }
.album-season { position: relative; z-index: 10; }
.album-season > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border-radius: var(--radius-medium); color: var(--album-secondary); font: 13px/1.5 var(--ui); list-style: none; cursor: pointer; transition: background-color 180ms var(--album-ease); }
.album-season > summary::-webkit-details-marker { display: none; }
.album-season > summary:hover, .album-season[open] > summary { background: var(--album-hover); }
.album-season > summary > svg { width: 18px; height: 18px; flex: 0 0 auto; }
.album-season > summary > .album-season__chevron { width: 12px; height: 12px; transition: transform 180ms var(--album-ease); }
.album-season[open] .album-season__chevron { transform: rotate(180deg); }
.album-season__panel { position: absolute; top: calc(100% + 10px); right: 0; width: 404px; max-height: min(620px, 75dvh); overflow-y: auto; padding: 22px; border-radius: 12px; background: var(--album-paper); box-shadow: 0 12px 40px #24231f1f; scrollbar-width: thin; scrollbar-color: var(--album-border) transparent; }
.album-season__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.album-season__heading > strong { font: 400 19px/1.5 "Noto Serif SC", "SimSun", serif; color: var(--album-ink); }
.album-season__heading > span { font-size: 12px; color: var(--album-secondary); }
.album-season__groups { display: grid; gap: 10px; }
.album-season__group { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 8px; margin: 0; }
.album-season__group > span { color: var(--album-secondary); font: 400 14px/1.5 "Noto Serif SC", "SimSun", serif; }
.album-season__options { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 2px; }
.album-season button { min-height: 44px; padding: 8px 3px; border: 0; border-radius: 6px; background: transparent; color: var(--album-secondary); font: 12px/1.5 var(--ui); transition: background-color 180ms var(--album-ease), color 180ms var(--album-ease); }
.album-season button:hover { background: var(--album-hover); color: var(--album-ink); }
.album-season button[aria-pressed=true] { background: var(--album-pressed); color: var(--album-ink); }
.album-season__light { display: grid; grid-template-columns: auto 1fr 40px; align-items: center; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-divider); color: var(--album-secondary); font-size: 12px; }
.album-season__light > input { width: 100%; min-width: 0; height: 32px; margin: 0; accent-color: var(--album-secondary); cursor: pointer; }
.album-season__light > output { text-align: right; font-variant-numeric: tabular-nums; }
.album-season__actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.album-season__actions > button { padding-inline: 10px; font-size: 13px; }
.album-season__note { margin: 8px 0 0; color: var(--album-secondary); font-size: 12px; }
.facsimile-stage { padding: 12px 24px 20px; perspective: 1800px; }
body[data-album=closed] .facsimile-stage { overflow: hidden; }
.facsimile-sizing { min-width: 0; }
.album-object { --spread-width: 881px; --closed-x: 25%; filter: none; transform: translateX(var(--closed-x)); transition: transform var(--album-duration) cubic-bezier(.22,.72,.2,1); }
.album-object > #letter-art { visibility: hidden; }
.album-left { position: absolute; inset: 0; clip-path: polygon(2.5% 10%,51% 7%,51% 92.8%,0 95.6%); }
.album-left > img, .album-inside-spread > img { display: block; width: 100%; height: 100%; }
.album-leaf { position: absolute; left: 51%; top: 0; width: 49%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transform: rotateY(-180deg); transition: transform var(--album-duration) cubic-bezier(.22,.72,.2,1); z-index: 2; }
.album-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; clip-path: polygon(0 7%,97.4% 6.45%,100% 88.8%,0 92.8%); }
.album-face--inside { transform: rotateY(0deg); }
.album-inside-spread { position: absolute; width: var(--spread-width); height: 100%; right: 0; }
.album-face--cover { transform: rotateY(180deg); color: var(--cover-ink); background: var(--cover-paper) url('/previews/letter-materials/wenzhengming-blank.png') 16% 40% / 450% auto; box-shadow: inset -10px 0 14px #4a342229; }
.album-face--cover::after { content: ""; position: absolute; inset: 8% 3% 9% 1%; pointer-events: none; border-right: 2px solid #70503255; }
.album-cover-title { position: absolute; right: 20%; top: 20%; display: flex; align-items: center; gap: 28px; writing-mode: vertical-rl; }
.album-cover-title > span { font: clamp(26px,calc(var(--spread-width) * .06),55px)/1.4 var(--hand); letter-spacing: .16em; }
.album-cover-title > small { font: 13px/1.5 var(--hand); letter-spacing: .1em; }
.album-copy { position: absolute; inset: 0; pointer-events: none; }
.album-copy .facsimile-writing { display: block; }
.album-written-message { flex: 1; min-width: 0; width: 100%; height: 100%; writing-mode: vertical-rl; font: inherit; letter-spacing: inherit; padding: 0; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; }
.album-written-name { height: 190px; max-height: 190px; width: 88px; white-space: normal !important; overflow-wrap: anywhere; }
.album-copy .album-signature { pointer-events: none; }
.album-object > .facsimile-writing { z-index: 3; }
.album-cover-trigger { position: absolute; left: 0; top: 7%; width: 51%; height: 87%; z-index: 4; background: transparent; border: 0; border-radius: 0; }
body:not([data-album=closed]) .album-cover-trigger { display: none; }
body[data-album=open] .album-object, body[data-album=review] .album-object { transform: translateX(0); }
body[data-album=open] .album-leaf, body[data-album=review] .album-leaf { transform: rotateY(0deg); }
body[data-album=opening] .album-object { transform: translateX(0); }
body[data-album=opening] .album-leaf { transform: rotateY(0deg); }
body[data-album=closing] .album-object, body[data-album=closed] .album-object { transform: translateX(var(--closed-x)); }
body[data-album=opening] .album-left, body[data-album=closing] .album-left { filter: brightness(.88); transition: filter var(--album-duration); }
.album-caption { max-width: 881px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 28px; }
.album-caption h1 { margin: 0 0 12px; font: 400 28px/1.4 var(--album-serif); letter-spacing: .04em; }
.album-caption p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
.album-action { padding: var(--space-2) var(--space-6); min-height: var(--control-size); border: 1px solid var(--album-border); border-radius: var(--radius-medium); background: var(--album-surface); color: var(--album-ink); font: 400 14px/1.5 var(--ui); transition: background-color 180ms var(--album-ease), border-color 180ms var(--album-ease); }
.album-action:hover { background: var(--album-hover); border-color: var(--album-secondary); }
.album-action:active { background: var(--album-pressed); }
.album-action:disabled { cursor: wait; opacity: .6; }
.album-caption p { font-family: var(--ui); font-size: 14px; }
.album-tail { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-4); padding: 20px 0; margin-top: 0; border-top: 1px solid var(--line-divider); color: var(--deep-text); font-family: var(--ui); }
.album-tail__body { min-width: 0; align-self: center; }
.album-tail__line { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.album-tail button { display: inline-flex; align-items: center; justify-content: center; color: var(--btn-content); margin: 0; border: 1px solid transparent; border-radius: var(--radius-medium); background: var(--btn-regular-bg); padding: var(--space-2) var(--space-3); min-height: var(--control-size); font: 400 14px/1.5 var(--ui); transition: background-color 180ms var(--album-ease), color 180ms var(--album-ease), border-color 180ms var(--album-ease); }
.album-tail button:hover { background: var(--btn-regular-bg-hover); }
.album-tail button:active, .album-tail button[aria-pressed=true], .album-tail button[aria-expanded=true] { background: var(--btn-regular-bg-active); }
.album-tail .album-return { gap: var(--space-2); }
.album-return > svg { width: 20px; height: 18px; flex: 0 0 auto; }
.album-return > small { font-size: 12px; font-weight: 400; color: var(--content-meta); }
.album-signature-tools { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; }
.album-signature-tools > button:not(:first-child) { font-size: 12px; color: var(--content-meta); }
.album-reply { display: grid; grid-template-columns: auto minmax(120px,1fr) auto; align-items: center; gap: var(--space-3); margin-top: var(--space-4); max-width: 600px; overflow: hidden; }
.album-reply > label { font-size: 13px; color: var(--content-meta); }
.album-tail .album-reply > input { width: 100%; min-width: 0; min-height: var(--control-size); padding: var(--space-2) var(--space-3); border: 1px solid var(--guestbook-editor-line); border-radius: var(--radius-medium); background: var(--guestbook-editor-bg); font: 14px/1.5 var(--ui); color: var(--guestbook-editor-text); transition: border-color 150ms; }
.album-tail .album-reply > input::placeholder { color: var(--guestbook-editor-muted); }
.album-tail .album-reply > input:focus { border-color: var(--guestbook-focus); outline: 0; }
.album-tail .album-reply > input[aria-invalid=true] { border-style: dashed; border-color: var(--guestbook-focus); }
.album-reply > button { white-space: nowrap; }
.album-finish { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); align-self: start; }
.album-tail .album-primary { padding-inline: var(--space-5); border-color: var(--album-border); background: var(--album-surface); color: var(--album-ink); white-space: nowrap; }
.album-tail .album-primary:hover { background: var(--album-hover); border-color: var(--album-secondary); }
.album-tail .album-primary:active { background: var(--album-pressed); }
.album-pages { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.album-pages button:disabled { opacity: .4; cursor: default; }
.album-tail .facsimile-error, #signature-help { margin: var(--space-3) 0 0; font: 13px/1.8 var(--ui); color: var(--content-meta); }
.album-tail .facsimile-error:empty { display: none; }
.album-tail .facsimile-error:not(:empty) { color: var(--album-error); }
.facsimile-signoff { flex-basis: 100px; padding-top: 20px; }
.facsimile-signoff input { height: 190px; }
#name-reading { height: 190px; max-height: 190px; width: 88px; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
#letter-reading { overflow: hidden; }
.album-signature { position: absolute; bottom: 22px; left: 12px; width: 120px; height: 70px; overflow: visible; pointer-events: none; }
.album-signature > rect { pointer-events: none; }
body[data-signing=true] .album-object > .facsimile-writing .album-signature > rect { pointer-events: all; }
body[data-signing=true] .album-object > .facsimile-writing .album-signature { pointer-events: auto; touch-action: none; cursor: crosshair; outline: 1px dashed #847455; outline-offset: 4px; }
.album-status { max-width: 881px; margin: 12px auto 0; font-size: 13px; line-height: 1.8; color: var(--accent); min-height: 24px; }
.facsimile-footer { margin-top: 20px; padding-top: 24px; font-size: 12px; line-height: 1.85; }
.facsimile-footer p { margin: 0 0 4px; }
.facsimile-footer a { text-decoration-color: var(--album-border); transition: color 180ms var(--album-ease); }
.facsimile-footer a:hover { color: var(--album-ink); }
@media (max-width: 680px) {
	.album-header { padding: 20px 24px; min-height: 76px; }
	.album-header__tools { gap: 10px; }
	.album-season__panel { position: fixed; top: 72px; right: 16px; width: calc(100vw - 32px); max-width: 404px; max-height: calc(100dvh - 104px); padding: 20px; }
	.facsimile-stage { padding: 0 8px 12px; }
	body[data-mode=writing] .facsimile-sizing { min-width: 600px; }
	.album-caption { padding: 16px 12px; align-items: flex-start; gap: 12px; }
	.album-caption h1 { font-size: 22px; }
	.album-caption p { max-width: 23ch; font-size: 12px; }
	.album-action { padding: 8px 20px; white-space: nowrap; }
	.album-tail { padding: var(--space-4) 0; margin: 0 12px; gap: var(--space-4); grid-template-columns: minmax(0,1fr); }
	.album-tail__line { gap: var(--space-1); }
	.album-tail button { font-size: 13px; }
	.album-tail .album-return { padding-left: var(--space-2); }
	.album-finish { flex-wrap: wrap; }
	.album-reply { grid-template-columns: minmax(0,1fr); gap: var(--space-2); }
	.album-reply > label { line-height: 1.8; }
	.album-reply > button { justify-self: end; }
	.album-tail .album-reply > input { display: block; margin: 0; font-size: 16px; }
	.album-pages { gap: 8px; flex-wrap: wrap; }
	.album-tail .facsimile-error, #signature-help { font-size: 13px; }
	.album-status { padding: 0 12px; }
	.album-cover-title { gap: 16px; }
	.album-cover-title > small { font-size: 10px; }
}
@media (max-width: 380px) {
	.album-season__options { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	body, .album-season button, .album-season > summary, .album-season__chevron { transition: none; }
	.album-object, .album-leaf, body[data-album=opening] .album-left, body[data-album=closing] .album-left { transition: none; }
	.album-tail button, .album-tail .album-primary, .album-action, .album-tail .album-reply > input { transition: none; }
	.album-object { transform: translateX(var(--closed-x)); }
	body[data-album=open] .album-object, body[data-album=review] .album-object { transform: none; }
}