@font-face { font-family: "Aurora Facsimile Brush"; src: url('/assets/aurora/fonts/reel/MaShanZheng-Regular.ttf') format('truetype'); font-display: swap; }
:root { color-scheme: dark; --desk: #4c4e4d; --ink: #efeee8; --muted: #d0d1cb; --edge: #a7aaa1; --paper-ink: #302719; --accent: #e3d0a8; --space: 4px; --hand: "Aurora Facsimile Brush", "KaiTi", serif; --ui: "Microsoft YaHei", system-ui, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--desk); color: var(--ink); font-family: var(--ui); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: 5px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { background: #a78653; color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.facsimile-header { max-width: 1280px; min-height: 96px; margin: auto; padding: 24px 36px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.facsimile-header > a:first-child { font: 23px var(--hand); text-decoration: none; }
.facsimile-header > a:last-child { justify-self: end; font-size: 12px; padding: 12px 0; color: var(--muted); }
.facsimile-tabs { display: flex; gap: 28px; }
.facsimile-tabs button { border: 0; border-radius: 0; background: none; min-height: 44px; padding: 8px 0; font-size: 14px; color: var(--muted); }
.facsimile-tabs button[aria-pressed=true] { color: var(--ink); text-decoration: underline; text-underline-offset: 9px; text-decoration-thickness: 1px; }
main { width: min(1120px, 100%); padding: 0 32px; margin: auto; }
.facsimile-stage { overflow: auto; perspective: 1400px; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; padding: 20px 24px 24px; }
.facsimile-sizing { --zoom: 1; width: calc(min(100%, 881px) * var(--zoom)); min-width: 300px; margin: auto; }
.facsimile-object { position: relative; aspect-ratio: 881 / 589; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .28s cubic-bezier(.16,1,.3,1); filter: drop-shadow(0 18px 16px #12151150); }
.facsimile-object > img { display: block; width: 100%; height: 100%; object-fit: fill; clip-path: polygon(2.5% 10%, 98.7% 6.45%, 100% 88.8%, 0 95.6%); }
.facsimile-writing { position: absolute; left: 0; top: 0; width: 600px; height: 500px; transform-origin: 0 0; color: var(--paper-ink); color-scheme: light; }
.facsimile-sheet { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 14px; padding: 24px 24px 22px 20px; width: 100%; height: 100%; font: 32px/1.6 var(--hand); letter-spacing: .025em; }
.facsimile-salutation { writing-mode: vertical-rl; margin: 0; font: inherit; flex: 0 0 auto; height: 100%; }
.facsimile-sheet textarea, #letter-reading { 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; }
.facsimile-sheet textarea { border: 0; background: transparent; border-radius: 0; resize: none; scrollbar-width: thin; scrollbar-color: #847455 transparent; caret-color: var(--paper-ink); }
.facsimile-sheet textarea::placeholder, .facsimile-sheet input::placeholder { color: #655136; opacity: 1; }
.facsimile-sheet :focus-visible { outline: 1px dashed #847455; outline-offset: 5px; }
#letter-reading { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #847455 transparent; }
.facsimile-signoff { display: flex; flex-direction: column; align-items: center; flex: 0 0 44px; gap: 20px; padding-top: 100px; font-size: 27px; line-height: 1.6; letter-spacing: .05em; }
.facsimile-signoff > span { writing-mode: vertical-rl; white-space: nowrap; }
.facsimile-signoff input { font: inherit; writing-mode: vertical-rl; text-orientation: upright; width: 42px; height: 190px; padding: 0; border: 0; border-radius: 0; background: transparent; letter-spacing: inherit; }
#name-reading { max-height: 190px; overflow: hidden; text-overflow: ellipsis; }
.facsimile-controls { max-width: 881px; margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 16px 0; }
.facsimile-description h1 { margin: 0 0 10px; font: 25px/1.4 var(--hand); }
.facsimile-description p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.facsimile-zoom { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.facsimile-zoom input { width: 100px; height: 36px; accent-color: var(--accent); cursor: pointer; }
.facsimile-zoom output { min-width: 40px; font-variant-numeric: tabular-nums; }
.facsimile-write-tools { max-width: 881px; margin: 12px auto 0; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.facsimile-write-tools label { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); }
.facsimile-write-tools input { width: 250px; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--edge); background: transparent; border-radius: 0; font-size: 13px; }
.facsimile-write-tools input::placeholder { color: var(--muted); }
.facsimile-write-tools button { min-height: 44px; padding: 8px 20px; border: 1px solid var(--edge); background: transparent; border-radius: 2px; margin-left: auto; }
.facsimile-write-tools button:hover { background: var(--ink); color: var(--desk); }
.facsimile-error { font-size: 13px; color: var(--accent); margin: 0; }
.facsimile-error:not(:empty) { flex-basis: 100%; }
.facsimile-footer { max-width: 945px; margin: 24px auto 0; padding: 16px 32px 28px; color: var(--muted); font-size: 11px; line-height: 2; }
.facsimile-footer p { margin: 12px 0 0; }
@media (max-width: 680px) {
	.facsimile-header { padding: 16px 20px; gap: 16px; min-height: 84px; }
	.facsimile-header > a:first-child { font-size: 21px; }
	.facsimile-tabs { gap: 16px; }
	.facsimile-tabs button { font-size: 12px; }
	.facsimile-header > a:last-child { font-size: 11px; }
	main { padding: 0 12px; }
	.facsimile-stage { padding: 16px 8px 24px; }
	.facsimile-controls { padding: 12px; flex-wrap: wrap; gap: 16px; }
	.facsimile-zoom { margin-left: auto; }
	.facsimile-write-tools { padding: 0 12px; }
	.facsimile-write-tools label { flex-basis: 100%; }
	.facsimile-footer { padding: 16px 24px 24px; }
	body[data-mode=writing] .facsimile-sizing { min-width: 600px; }
}
@media (prefers-reduced-motion: reduce) { .facsimile-object { transform: none; transition: none; } }