@font-face {
  font-family: "Noto Sans Nushu";
  src: url("/fonts/NotoSansNushu-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #26312d;
  --muted: #706f68;
  --wine: #a64338;
  --wine-dark: #7e302b;
  --paper: #f5f0e6;
  --line: #dcd2c4;
  --cream: #fffdf7;
  --soft: #eee7d9;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 88% 5%, rgba(204, 150, 120, .22), transparent 30%), radial-gradient(circle at 2% 38%, rgba(167, 177, 150, .19), transparent 28%), repeating-linear-gradient(90deg, rgba(103, 78, 51, .013) 0 1px, transparent 1px 5px), var(--paper); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; text-decoration: none; }
.loading-shell { padding: 20vh 2rem; text-align: center; color: var(--muted); }
.loading-retry { display: block; margin: 20px auto 0; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-header, .site-footer, main { width: min(1280px, calc(100% - 64px)); margin: 0 auto; }
.site-header { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #cfc4b4; }
.brand { display: inline-flex; align-items: center; gap: 13px; font-family: "Songti SC", "Noto Serif CJK SC", serif; font-size: 23px; letter-spacing: .16em; font-weight: 600; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font: 10px/1.2 sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.brand-mark { width: 43px; height: 43px; border: 1px solid var(--wine); border-radius: 12px; display: grid; place-items: center; color: var(--wine); font-size: 24px; letter-spacing: 0; transform: rotate(-7deg); }
.site-header nav { display: flex; gap: 34px; font-size: 14px; color: var(--muted); }
.site-header nav a { padding: 10px 0; border-bottom: 1px solid transparent; }
.site-header nav a:hover, .site-header nav a.active { color: var(--wine-dark); border-color: var(--wine-dark); }
main { flex: 1; padding: 40px 0 110px; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0 35px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, .73fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.panel { background: var(--cream); border: 1px solid #e2d8ca; border-radius: 18px; box-shadow: 0 22px 64px rgba(64, 48, 32, .07); }
.form-panel { padding: 0 44px 48px; overflow: hidden; }
.section-kicker { color: var(--wine-dark); font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
h1, h2 { font-family: "Songti SC", "Noto Serif CJK SC", "STSong", serif; font-weight: 500; }
h1 { font-size: clamp(36px, 4vw, 58px); line-height: 1.28; letter-spacing: .06em; margin: 20px 0 17px; }
h1 em { font-style: normal; color: var(--wine); }
h2 { font-size: 24px; margin: 12px 0 15px; letter-spacing: .04em; }
.intro { max-width: 35em; color: var(--muted); font-size: 15px; line-height: 1.85; margin: 0 0 28px; }
.composer-hero { position: relative; isolation: isolate; overflow: hidden; margin: 0 -44px 0; padding: 50px 44px 30px; background: radial-gradient(circle at 88% 14%, rgba(192, 108, 86, .15), transparent 30%), linear-gradient(143deg, #f9f3e7 0%, #fff9ef 48%, #f2e8db 100%); border-bottom: 1px solid #e7d7c5; }
.composer-hero::before { content: ""; position: absolute; right: 27px; top: 29px; width: 108px; height: 108px; border: 1px solid rgba(138, 75, 54, .17); border-radius: 50%; z-index: -1; }
.composer-hero__ornament { position: absolute; right: 0; top: 70px; font-size: clamp(180px, 20vw, 280px); line-height: 1; color: rgba(144, 62, 52, .095); transform: rotate(-9deg); pointer-events: none; z-index: -1; }
.composer-hero h1 { max-width: 650px; margin: 20px 0 17px; font-size: clamp(43px, 4.5vw, 67px); line-height: 1.23; letter-spacing: .025em; }
.composer-hero h1 em { color: var(--wine-dark); }
.composer-hero .intro { max-width: 30em; margin-bottom: 28px; color: #5c6259; }
.composer-hero__culture { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 0; padding: 9px 14px; border: 1px solid #d9b9a2; border-radius: 999px; background: rgba(255, 253, 247, .69); color: #784b3c; font-size: 12px; line-height: 1.5; }
.composer-hero__culture .nushu-glyph { flex: 0 0 auto; font-size: 22px; line-height: 1; }
.form-chapter { display: flex; align-items: center; gap: 12px; margin: 0 0 17px; }
.form-chapter__line { flex: 1; height: 1px; margin: 0; background: #dbcfc0; }
.form-chapter > span:last-child { color: #988e81; font-size: 11px; white-space: nowrap; }
.writing-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; color: #978c7e; font-size: 11px; }
.nushu-writing-note { display: grid; grid-template-columns: 84px 1fr; gap: 19px; position: relative; margin-top: 27px; padding: 22px 24px 23px; border: 1px solid #d2b3a2; border-radius: 14px; background: linear-gradient(135deg, #fcf3e9, #f8e9dd 60%, #f2e3d5); box-shadow: 0 7px 19px rgba(111, 70, 48, .055); }
.nushu-writing-note__mark { display: grid; place-items: center; align-self: start; width: 82px; height: 96px; border: 1px solid rgba(151, 72, 59, .32); border-radius: 40px 40px 10px 10px; background: rgba(255, 250, 241, .76); color: var(--wine-dark); font-size: 64px; }
.nushu-writing-note__copy h2 { margin: 7px 0 8px; font-size: 22px; line-height: 1.45; color: #4a392f; }
.nushu-writing-note__copy > p { margin: 0; color: #746257; font-size: 12px; line-height: 1.8; }
.nushu-writing-note__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; margin-top: 7px; }
.nushu-writing-note__actions .text-button { margin: 0; }
.nushu-writing-note__actions a { color: #72574d; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.nushu-writing-note__detail { display: flex; gap: 13px; align-items: center; margin-top: 11px; padding: 11px 13px; border: 1px solid #dcc6b6; border-radius: 9px; background: #fffaf3; color: #55453c; font-size: 12px; }
.nushu-writing-note__detail p { margin: 0; }
.nushu-writing-note__detail .nushu-glyph { flex: 0 0 auto; font-size: 39px; color: var(--wine-dark); }
.nushu-writing-note__detail span, .nushu-writing-note__detail small { display: block; }
.nushu-writing-note__detail small { margin-top: 3px; color: #837268; line-height: 1.6; }
.journey-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 23px 0 31px; padding: 0; list-style: none; counter-reset: journey; }
.journey-steps li { position: relative; min-width: 0; padding: 13px 10px 13px 37px; border: 1px solid #e5dbce; border-radius: 10px; background: #faf7ef; counter-increment: journey; }
.journey-steps li::before { content: counter(journey); position: absolute; left: 10px; top: 13px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #e8d5c8; color: #8a4336; font: 700 11px/1 sans-serif; }
.journey-steps strong, .journey-steps span { display: block; }
.journey-steps strong { color: #5b443a; font-size: 12px; }
.journey-steps span { margin-top: 4px; color: #887b6e; font-size: 10px; line-height: 1.5; }
.journey-steps--receiver { margin-bottom: 25px; }
.journey-steps--receiver li.done { border-color: #b6cfb9; background: #ecf4ec; }
.next-action { display: flex; gap: 14px; margin: -12px 0 27px; padding: 17px; border: 1px solid #d9ded5; border-radius: 13px; background: #f0f4ed; }
.next-action > span { flex: 0 0 30px; display: grid; place-items: center; height: 30px; border-radius: 50%; background: #dceadf; color: #537b60; font-size: 18px; }
.next-action strong { color: #3f5d4c; font-size: 14px; }
.next-action p { margin: 5px 0 0; color: #607166; font-size: 12px; line-height: 1.7; }
form label, .catalog-search { display: block; color: #4a4843; font-size: 13px; font-weight: 600; margin-top: 20px; }
label span { color: #99938b; font-weight: 400; font-size: 11px; margin-left: 5px; }
input:not([type="radio"]):not([type="range"]), textarea { width: 100%; display: block; margin-top: 9px; padding: 13px 14px; border: 1px solid var(--line); background: #fffdfa; border-radius: 9px; outline: none; color: var(--ink); font-size: 14px; line-height: 1.5; transition: border-color .2s, box-shadow .2s; }
input:focus, textarea:focus { border-color: var(--wine) !important; box-shadow: 0 0 0 3px rgba(156, 81, 73, .1); }
textarea { resize: vertical; min-height: 205px; }
.form-panel textarea { background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(161, 133, 100, .14) 32px), #fffdfa; line-height: 2.25; }
input::placeholder, textarea::placeholder { color: #afa99f; }
fieldset { margin: 0; padding: 0; border: 0; }
legend { color: #4a4843; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.category-option { position: relative; display: flex; flex-direction: column; gap: 5px; min-height: 104px; margin: 0 !important; padding: 15px 17px; border: 1px solid var(--line); border-radius: 11px; background: #fffefa; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.category-option::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 14px 0 0 14px; background: var(--category-accent, #b7b9aa); }
.category-romance { --category-accent: #d6969a; }
.category-companion { --category-accent: #b99c76; }
.category-family { --category-accent: #a99378; }
.category-friend { --category-accent: #83aaa2; }
.category-future-self { --category-accent: #93a4ac; }
.category-remembrance { --category-accent: #a6a6a0; }
.category-option:hover:not(.unavailable) { transform: translateY(-2px); border-color: #c7a7a0; }
.category-option.active { background: linear-gradient(145deg, #fff9f4, #f5e6d9); border-color: #a65344; box-shadow: 0 7px 20px rgba(132, 75, 65, .11); }
.category-option.unavailable { cursor: not-allowed; background: #f4f4f0; opacity: .72; }
.category-option input { position: absolute; opacity: 0; pointer-events: none; }
.category-option:focus-within { outline: 2px solid var(--wine); outline-offset: 2px; }
.category-option strong { font-size: 16px; font-weight: 600; }
.category-option small { color: var(--muted); font-size: 11px; font-weight: 400; }
.category-index { margin: 0 0 6px !important; color: #a67a72 !important; font: 12px/1.2 Georgia, serif !important; letter-spacing: .14em; }
.category-status { position: absolute; right: 10px; top: 10px; color: #7d817d !important; font-size: 10px !important; }
.policy-note { padding: 15px 18px; margin: 18px 0 4px; border: 1px solid #d9ded5; border-radius: 12px; background: #f0f4ed; color: #4c5b54; font-size: 12px; line-height: 1.8; }
.policy-note strong { font-weight: 700; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-divider { height: 1px; background: var(--line); margin: 43px 0 32px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-heading span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.help { color: var(--muted); font-size: 12px; line-height: 1.8; margin: 9px 0 15px; }
.challenge-row { display: flex; align-items: center; gap: 13px; margin-top: 14px; }
.challenge-number { color: #bd8f88; font: italic 23px Georgia, serif; align-self: flex-start; padding-top: 12px; }
.challenge-fields { flex: 1; }
.challenge-fields input { margin-top: 0 !important; margin-bottom: 7px; }
.icon-button { border: 0; background: transparent; color: #a09289; font-size: 24px; padding: 9px; align-self: flex-start; }
.text-button { border: 0; background: transparent; padding: 9px 0; color: var(--wine-dark); font-size: 13px; font-weight: 600; text-align: left; }
.text-button:hover { text-decoration: underline; }
.segmented { display: flex; gap: 5px; padding: 4px; margin: 17px 0 13px; background: #f3eee6; border-radius: 5px; }
.segmented button { flex: 1; min-width: 0; border: 0; border-radius: 3px; padding: 10px 6px; background: transparent; color: #786f65; font-size: 12px; }
.segmented button.active { color: var(--wine-dark); background: white; box-shadow: 0 2px 6px rgba(68, 46, 37, .08); font-weight: 700; }
.destination-card { padding: 17px; min-height: 78px; border: 1px solid var(--line); border-radius: 12px; background: #fcfaf5; }
.destination-card strong, .destination-card small { display: block; }
.destination-card strong { font-size: 15px; }
.destination-card small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.destination-card label { margin: 0 0 14px; }
.destination-card input { margin: 8px 0 0; }
.destination-card .notice { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.inline-action { display: flex; align-items: flex-end; gap: 8px; }
.inline-action input { margin: 0 !important; }
.place-choice { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; margin-top: 9px; padding: 10px 12px; border: 1px solid var(--line); background: #fff; text-align: left; }
.place-choice.selected { border-color: var(--wine); background: #fbefeb; }
.place-choice small { margin: 0; }
.choice-state { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: #e8f1e9; color: #4b7158; font-size: 11px; font-weight: 700; white-space: nowrap; }
.location-readout { font-size: 12px; color: var(--wine-dark); line-height: 1.5; }
.map-canvas { width: 100%; height: 290px; margin-top: 14px; border: 1px solid var(--line); background: #eee8dd; z-index: 0; }
.location-sketch { position: relative; min-height: 250px; margin-top: 14px; overflow: hidden; border: 1px solid #d7ded5; border-radius: 15px; background: linear-gradient(135deg, #edf2eb, #e6ece5 58%, #f4eee5); }
.location-sketch__stage { position: absolute; inset: 0 0 60px; background-image: linear-gradient(26deg, transparent 46%, rgba(255,255,255,.82) 47% 49%, transparent 50%), linear-gradient(116deg, transparent 43%, rgba(255,255,255,.74) 44% 47%, transparent 48%), radial-gradient(circle at 65% 25%, #d6e5d4 0 14%, transparent 15%); }
.location-sketch__circle { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; transform: translate(-50%, -50%); border: 2px solid #ad6559; border-radius: 50%; background: rgba(175, 95, 85, .15); box-shadow: 0 0 0 10px rgba(255,255,255,.3); }
.location-sketch__pin { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 50%; background: var(--wine-dark); box-shadow: 0 2px 10px rgba(52, 58, 48, .3); }
.location-sketch__details { position: relative; display: flex; flex-direction: column; gap: 4px; width: max-content; max-width: calc(100% - 24px); margin: 14px; padding: 10px 13px; border-radius: 10px; background: rgba(255, 254, 250, .94); box-shadow: 0 4px 15px rgba(38, 50, 40, .08); font-size: 11px; color: #64746a; }
.location-sketch__details strong { color: #33453c; font-size: 13px; }
.location-sketch > p { position: absolute; inset: auto 12px 7px; margin: 0; color: #53645a; font-size: 10px; line-height: 1.5; }
.location-sketch > p a { display: inline-block; margin: 0 5px; color: #80463c; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.map-pin { background: transparent; border: 0; }
.map-pin span { display: block; width: 24px; height: 24px; border: 4px solid #fff7f0; border-radius: 50% 50% 50% 0; background: var(--wine); transform: rotate(-45deg); box-shadow: 0 2px 9px rgba(54, 35, 26, .34); }
.leaflet-container { font-family: inherit; }
.leaflet-control-attribution { font-size: 10px !important; }
.range-label { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 20px; }
.range-label strong { color: var(--wine-dark); }
.range-label input { flex: 0 0 100%; accent-color: var(--wine); margin: 15px 0 0; }
.primary-button, .secondary-button { display: inline-flex; justify-content: center; align-items: center; border-radius: 12px; padding: 12px 19px; min-height: 43px; font-size: 13px; font-weight: 650; transition: background .2s, transform .2s; }
.primary-button { background: var(--wine); border: 1px solid var(--wine); color: white; }
.primary-button:hover:not(:disabled) { background: var(--wine-dark); transform: translateY(-1px); }
.secondary-button { background: transparent; border: 1px solid #c9aba4; color: var(--wine-dark); }
.secondary-button:hover:not(:disabled) { background: #f9efea; }
.publish-button { width: 100%; margin-top: 21px; padding: 16px 20px; min-height: 56px; font-size: 15px; letter-spacing: .08em; gap: 12px; }
.publish-button span { color: inherit; font-size: 18px; margin: 0; }
.form-message { padding: 12px 15px; margin: 17px 0 0; background: #fff1eb; border-left: 3px solid var(--wine); color: var(--wine-dark); font-size: 13px; line-height: 1.7; }

.composer-preview { position: sticky; top: 25px; }
.composer-preview .preview-column { position: static; padding-top: 6px; }
.preview-column { position: sticky; top: 35px; padding-top: 20px; }
.preview-heading { display: flex; justify-content: space-between; color: #5f584f; font-size: 13px; font-weight: 700; margin-bottom: 16px; letter-spacing: .06em; }
.preview-heading small { color: #a29a90; }
.preview-note { max-width: 25em; margin: 20px auto; color: var(--muted); font-size: 12px; line-height: 1.8; text-align: center; }
.preview-footnote { display: flex; gap: 10px; align-items: center; max-width: 31em; margin: 18px auto 0; padding: 12px 15px; border-top: 1px solid #d9c8b6; color: #776a5c; }
.preview-footnote .nushu-glyph { flex: 0 0 auto; color: var(--wine-dark); font-size: 31px; }
.preview-footnote p { margin: 0; font-size: 11px; line-height: 1.6; }
.mobile-preview-trigger, .preview-backdrop { display: none; }
.letter-cover { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 560px; padding: 18px; overflow: hidden; border-radius: 5px 18px 18px 5px; background: #e9ded0; border: 1px solid #c9b7a3; box-shadow: 5px 5px 0 #d9c5ad, 16px 24px 38px rgba(59, 45, 31, .15); }
.letter-cover::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0 1px, transparent 1px 5px), repeating-linear-gradient(0deg, rgba(88,67,51,.06) 0 1px, transparent 1px 4px); opacity: .72; pointer-events: none; }
.letter-cover::after { content: ""; position: absolute; top: -20%; left: 54%; width: 3px; height: 150%; transform: rotate(-12deg); box-shadow: 12px 0 32px rgba(97, 73, 56, .1), -12px 0 25px rgba(255,255,255,.6); pointer-events: none; }
.cover-romance { background-color: #eee0dc; }
.cover-companion { background-color: #e6decf; }
.cover-family { background-color: #dfd3bf; }
.cover-friend { background-color: #dce5e1; }
.cover-future-self { background-color: #e9e7df; }
.cover-remembrance { background-color: #e7e7e2; }
.fabric-edge { position: absolute; inset: 11px; border: 1px solid rgba(97, 74, 52, .24); border-radius: 3px 12px 12px 3px; }
.fabric-edge::before, .fabric-edge::after { content: "𛅱 · 𛅲 · 𛅳"; position: absolute; top: 29px; bottom: 29px; color: rgba(103, 60, 48, .35); font: 24px/1 "Noto Sans Nushu", sans-serif; writing-mode: vertical-rl; letter-spacing: .4em; }
.fabric-edge::before { left: 12px; }
.fabric-edge::after { right: 12px; transform: rotate(180deg); }
.cover-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 18px 10%; text-align: center; }
.cover-inner .eyebrow { color: #806b5f; font-family: "Songti SC", serif; font-size: 12px; letter-spacing: .22em; }
.cover-inner h2 { font-size: clamp(27px, 3vw, 41px); line-height: 1.5; margin: 12% 0 13px; letter-spacing: .13em; }
.recipient-label { color: #756b61; font-family: "Songti SC", serif; font-size: 13px; margin: 16px 0 -10px; }
.cover-teaser { min-height: 36px; color: #756b61; font-size: 13px; line-height: 1.8; }
.wax-seal { width: 72px; height: 72px; display: grid; place-items: center; margin-top: 12%; color: #f3d3bc; border: 4px double #d98b77; background: radial-gradient(circle at 32% 25%, #be6758, #7e302b 72%); border-radius: 50%; box-shadow: 2px 4px 9px rgba(77, 35, 30, .24); font: 43px "Noto Sans Nushu", sans-serif; }
.seal-caption { margin: 15px 0 0; color: #8d544b; font-size: 11px; letter-spacing: .15em; }
.seal-caption small { display: block; margin-top: 5px; color: #766c62; font-size: 10px; letter-spacing: .04em; }

.receiver-layout { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.receiver-intro { width: 100%; text-align: center; margin-bottom: 24px; }
.receiver-intro h1 { margin-bottom: 0; }
.receiver-layout .letter-cover { max-width: 420px; }
.receiver-panel { width: min(100%, 620px); margin-top: 35px; padding: 35px 40px; }
.receiver-panel h2 { margin-top: 9px; }
.receiver-panel p { line-height: 1.8; }
.receiver-panel .primary-button { width: 100%; margin-top: 18px; }
.receiver-panel .coordinates { padding: 14px; margin-top: 19px; border: 1px solid var(--line); color: #786c61; background: #fbf8f2; font-family: ui-monospace, monospace; text-align: center; }
.letter-body { white-space: pre-wrap; overflow-wrap: anywhere; font-family: "Songti SC", "Noto Serif CJK SC", serif; font-size: 18px; line-height: 2.2 !important; color: #3c3732; }
.unsealed-letter { position: relative; isolation: isolate; width: min(100%, 680px); margin-top: 8px; padding: 16px; overflow: hidden; border: 1px solid #d5c5b6; background: #e5d8c9; box-shadow: 3px 5px 0 #d6c8b8, 10px 16px 32px rgba(65, 45, 33, .12); }
.unsealed-letter__content { position: relative; z-index: 1; padding: 35px 40px 24px; border: 1px solid rgba(111, 83, 66, .26); background: #f7f0e5; }
.unsealed-letter__content h2 { margin: 12px 0 3px; font-size: clamp(26px, 4vw, 36px); }
.unsealed-letter__place { margin: 0 0 23px; color: #8b7160; font: 14px/1.6 "Songti SC", serif; }
.unsealed-letter__fold { display: none; position: absolute; z-index: 2; top: 0; bottom: 0; width: 50%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 5px), #e5d8c9; pointer-events: none; }
.unsealed-letter__fold--left { left: 0; border-right: 1px solid #c7b4a3; transform-origin: left center; }
.unsealed-letter__fold--right { right: 0; border-left: 1px solid #c7b4a3; transform-origin: right center; }
.unsealed-letter--animate .unsealed-letter__fold { display: block; }
.unsealed-letter--animate .unsealed-letter__fold--left { animation: unfold-left 1.1s ease-in-out forwards; }
.unsealed-letter--animate .unsealed-letter__fold--right { animation: unfold-right 1.1s ease-in-out forwards; }
.unsealed-letter--animate .unsealed-letter__content { animation: reveal-ink 1.15s ease-out both; }
.reading-toolbar { display: flex; gap: 4px; width: fit-content; margin: 0 0 16px auto; padding: 3px; border: 1px solid #ded0c2; border-radius: 4px; background: #eee3d6; }
.reading-toolbar button { border: 0; border-radius: 2px; padding: 7px 16px; background: transparent; color: #74695e; font-size: 12px; }
.reading-toolbar button.active { background: #fffaf3; color: var(--wine-dark); box-shadow: 0 1px 5px rgba(70, 47, 34, .1); }
.unsealed-letter__reading { max-height: 70vh; overflow: auto; padding: 26px 28px; border: 1px solid #dfd1c1; background: #fcf7ee; }
.unsealed-letter__reading--vertical { height: min(62vh, 560px); max-height: none; writing-mode: vertical-rl; text-orientation: mixed; overflow-x: auto; overflow-y: hidden; }
.unsealed-letter__body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #3c3732; font: 19px/2.1 "Songti SC", "Noto Serif CJK SC", serif; letter-spacing: .04em; }
.unsealed-letter__content > .help { margin: 19px 0 0; }
.poster-result { margin-top: 22px; }
.poster-result img { display: block; width: min(100%, 340px); height: auto; margin: 0 auto 8px; border: 1px solid var(--line); }
.poster-result .text-button { display: inline-block; }
@keyframes unfold-left { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes unfold-right { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes reveal-ink { from { opacity: .15; } to { opacity: 1; } }
.link-block { border-top: 1px solid var(--line); padding: 22px 0; }
.link-block strong { font-size: 16px; }
.link-block small { margin-left: 10px; color: var(--muted); font-size: 11px; }
.link-value { padding: 12px; background: #f6f2eb; color: #706b64; word-break: break-all; font: 12px/1.6 ui-monospace, monospace; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.status-block { border: 1px solid var(--line); padding: 18px; margin: 12px 0 20px; background: #f9f6f0; }
.status-block.alert { background: #fff0ea; border-color: #dba69b; }
.status-block p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.author-copy { padding: 16px 0; border-top: 1px solid var(--line); }
.author-copy summary { cursor: pointer; font-size: 13px; font-weight: 650; }
.sealed-state { display: flex; gap: 15px; align-items: flex-start; padding: 20px; margin: 18px 0; border: 1px solid #d9ded5; border-radius: 14px; background: #eff3ed; }
.sealed-state > span { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 50%; background: #dde9df; color: #49705e; font-size: 21px; }
.sealed-state strong { font-size: 15px; }
.sealed-state p { margin: 6px 0 0; color: #627068; font-size: 12px; line-height: 1.7; }
.withdrawal-zone { margin-top: 28px; padding: 20px; border: 1px solid #e6cfca; border-radius: 14px; background: #fff9f7; }
.withdrawal-zone > strong { color: #87463f; font-size: 14px; }
.withdrawal-zone > p { margin: 8px 0; color: #806f6b; font-size: 12px; line-height: 1.8; }
.danger-text { color: #a0423a; }
.withdrawal-confirm label { display: block; margin: 17px 0 13px; color: #87463f; font-size: 12px; font-weight: 600; }
.withdrawal-confirm .button-row { justify-content: flex-end; }
.danger-button { display: inline-flex; justify-content: center; align-items: center; min-height: 43px; padding: 12px 19px; border: 1px solid #a0423a; border-radius: 12px; background: #a0423a; color: white; font-size: 13px; font-weight: 650; }
.danger-button:hover:not(:disabled) { background: #84342e; }
.danger-button:disabled { cursor: not-allowed; opacity: .55; }
.library-panel { width: min(100%, 760px); margin: 0 auto; padding: 42px 48px 52px; }
.library-section { padding: 23px 0; border-top: 1px solid var(--line); }
.library-section h2 { margin-top: 0; }
.library-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fffdfa; }
.library-item:hover, .library-item:focus-visible { border-color: var(--wine); background: #fff7f2; }
.library-item strong, .library-item small { display: block; }
.library-item strong { font-size: 15px; }
.library-item small { margin-top: 6px; color: var(--muted); font-size: 11px; }
.library-item > span:last-child { color: var(--wine); font-size: 20px; }
.library-import .secondary-button { margin-top: 15px; }

.review-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(25, 31, 31, .64); backdrop-filter: blur(8px); }
.review-dialog { width: min(100%, 600px); max-height: min(90vh, 820px); overflow: auto; padding: clamp(24px, 4vw, 42px); border-radius: 22px; background: #fffefa; box-shadow: 0 28px 85px rgba(11, 22, 20, .27); }
.review-dialog h2 { font-size: clamp(27px, 4vw, 38px); margin: 13px 0 4px; }
.review-meta { color: #8d8176; font-size: 12px; line-height: 1.6; }
.review-body { max-height: 36vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 22px; margin: 23px 0; border: 1px solid #e2d9cd; border-radius: 12px; background: repeating-linear-gradient(90deg, rgba(101, 80, 54, .025) 0 1px, transparent 1px 6px), #f9f5ed; color: #353b35; font: 18px/2 "Songti SC", "Noto Serif CJK SC", serif; }
.review-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 23px; }
.review-actions button { min-width: 120px; }

.catalog-page { max-width: 1000px; margin: 0 auto; padding: 50px; }
.catalog-page .intro { max-width: 55em; }
.catalog-source { color: var(--wine-dark); text-decoration: underline; text-underline-offset: 3px; }
.catalog-compose-link { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px 17px; border: 1px solid #b76b58; border-radius: 10px; background: #fff3eb; color: var(--wine-dark); font-size: 13px; font-weight: 700; }
.catalog-compose-link:hover { background: #fce5d8; }
.catalog-search { max-width: 320px; }
.catalog-count { color: var(--muted); font-size: 12px; margin-top: 25px; }
.glyph-detail { display: grid; grid-template-columns: minmax(120px, .3fr) 1fr; gap: 26px; margin: 15px 0 27px; padding: 25px; border: 1px solid #dac8bc; border-radius: 18px; background: linear-gradient(135deg, #f8efe6, #fffdfa 68%); }
.glyph-detail__mark { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; border: 1px dashed #d5b8a6; border-radius: 13px; background: #fffaf3; }
.glyph-detail__mark .nushu-glyph { font-size: 88px; }
.glyph-detail__mark code { color: #8c7265; font-size: 12px; }
.glyph-detail__body h2 { margin: 7px 0 16px; font-size: 25px; }
.glyph-detail__body dl { margin: 0; }
.glyph-detail__body dl > div { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid #ece0d4; }
.glyph-detail__body dt { color: #8a776d; font-size: 12px; }
.glyph-detail__body dd { margin: 0; color: #3f453e; font-size: 14px; font-weight: 650; }
.glyph-detail__body dd small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.6; }
.glyph-detail__body p { margin: 15px 0 9px; color: #76685f; font-size: 11px; line-height: 1.7; }
.glyph-detail__body a { color: var(--wine-dark); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.catalog-empty { padding: 22px; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
.glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin: 17px 0 30px; }
.glyph-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 110px; padding: 13px 6px; background: #faf6ee; border: 1px solid var(--line); border-radius: 10px; }
.glyph-cell:hover, .glyph-cell:focus-visible, .glyph-cell.selected { border-color: #bb796e; background: #fff1e9; outline-offset: 2px; }
.nushu-glyph { display: block; font: 45px/1.25 "Noto Sans Nushu", sans-serif; }
.glyph-cell code, .iteration-mark code { margin-top: 5px; color: var(--muted); font-size: 10px; }
.iteration-mark { display: flex; gap: 15px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.iteration-mark strong, .iteration-mark code { display: block; }

@media (max-width: 850px) {
  .page-grid { grid-template-columns: 1fr; gap: 32px; }
  .preview-column { position: static; display: block; order: -1; width: min(100%, 340px); margin: 0 auto; padding-top: 0; }
  .preview-column .letter-cover { max-height: 410px; }
  .preview-note { display: none; }
  .composer-preview { position: static; height: 0; }
  .composer-preview .preview-column { display: none; }
  .mobile-preview-trigger { display: flex; align-items: center; gap: 11px; position: fixed; z-index: 50; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); width: min(420px, calc(100% - 36px)); min-height: 61px; padding: 8px 12px; border: 1px solid #bd8f74; border-radius: 16px; background: #fffaf1; box-shadow: 0 12px 38px rgba(63, 39, 27, .23); transform: translateX(-50%); color: var(--ink); text-align: left; }
  .mobile-preview-trigger__glyph.nushu-glyph { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 10px; background: #9d4237; color: #fff1df; font-size: 29px; }
  .mobile-preview-trigger > span:nth-child(2) { min-width: 0; flex: 1; }
  .mobile-preview-trigger strong, .mobile-preview-trigger small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .mobile-preview-trigger strong { font-size: 13px; }
  .mobile-preview-trigger small { margin-top: 2px; color: #786e61; font-size: 11px; }
  .mobile-preview-trigger__arrow { flex: 0 0 auto; color: var(--wine-dark); font-size: 21px; }
  .preview-backdrop { display: grid; place-items: center; position: fixed; z-index: 1001; inset: 0; padding: 18px; background: rgba(30, 29, 27, .7); backdrop-filter: blur(9px); }
  .preview-dialog { width: min(100%, 420px); max-height: min(94dvh, 760px); overflow-y: auto; padding: 17px 20px 23px; border: 1px solid #e5cdb7; border-radius: 18px; background: #fbf5eb; box-shadow: 0 22px 68px rgba(15, 11, 7, .28); outline: none; }
  .preview-dialog__heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 15px; }
  .preview-dialog__heading h2 { margin: 4px 0 0; font-size: 23px; }
  .preview-close { flex: 0 0 34px; height: 34px; border: 1px solid #d8c3ad; border-radius: 50%; background: #fffaf2; color: #7b4a3d; font-size: 23px; line-height: 1; }
  .preview-dialog .letter-cover { width: min(100%, 320px); max-height: none; margin: 0 auto; }
  .preview-dialog__note { margin: 18px auto 0; max-width: 26em; color: #756d61; font-size: 11px; line-height: 1.7; text-align: center; }
  .site-header, .site-footer, main { width: min(100% - 32px, 650px); }
  .site-header { height: 74px; }
  main { padding: 25px 0 125px; }
  .form-panel { padding: 0 23px 36px; }
  .composer-hero { margin: 0 -23px; padding: 36px 23px 28px; }
  .site-footer { flex-direction: column; gap: 5px; }
  .manage-layout .preview-column { display: block; }
}

@media (max-width: 520px) {
  .site-header { height: auto; min-height: 88px; flex-wrap: wrap; gap: 4px; padding: 10px 0; }
  .site-header nav { justify-content: space-between; width: 100%; }
  .library-panel { padding: 29px 22px 34px; }
  .brand { font-size: 18px; gap: 8px; }
  .brand-mark { width: 35px; height: 35px; font-size: 20px; }
  .brand small { font-size: 8px; }
  .site-header nav { gap: 14px; font-size: 12px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .journey-steps { grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 17px 0 27px; }
  .journey-steps li { padding: 9px 5px 9px 24px; }
  .journey-steps li::before { left: 5px; top: 10px; width: 15px; height: 15px; font-size: 9px; }
  .journey-steps li strong { font-size: 10px; line-height: 1.35; }
  .journey-steps li span { display: none; }
  h1 { font-size: 36px; }
  .receiver-panel { padding: 27px 23px; margin-top: 25px; }
  .preview-column { width: min(100%, 276px); }
  .preview-heading { margin-bottom: 10px; }
  .preview-heading small { display: none; }
  .form-panel { padding: 0 18px 34px; }
  .composer-hero { margin: 0 -18px; padding: 28px 18px 25px; }
  .composer-hero h1 { margin: 15px 0 12px; font-size: clamp(37px, 10vw, 47px); line-height: 1.2; }
  .composer-hero .intro { margin-bottom: 16px; font-size: 13px; line-height: 1.7; }
  .composer-hero__ornament { right: -25px; top: 47px; font-size: 185px; }
  .composer-hero__culture { padding: 7px 10px; border-radius: 9px; font-size: 10px; }
  .nushu-writing-note { grid-template-columns: 47px 1fr; gap: 11px; padding: 15px 13px; }
  .nushu-writing-note__mark { width: 45px; height: 58px; border-radius: 25px 25px 7px 7px; font-size: 35px; }
  .nushu-writing-note__copy h2 { font-size: 18px; }
  .nushu-writing-note__actions { gap: 0 11px; }
  .nushu-writing-note__actions a, .nushu-writing-note__actions .text-button { font-size: 11px; }
  .writing-meta { font-size: 10px; }
  .form-chapter { gap: 7px; }
  .form-chapter > span:last-child { font-size: 10px; }
  .category-grid { gap: 8px; }
  .category-option { min-height: 100px; padding: 13px; }
  .category-option strong { font-size: 14px; }
  .review-actions { flex-direction: column-reverse; }
  .review-actions button { width: 100%; }
  .receiver-layout .letter-cover { width: 95%; }
  .unsealed-letter { width: 100%; padding: 9px; }
  .unsealed-letter__content { padding: 25px 18px 21px; }
  .unsealed-letter__reading { padding: 18px 16px; }
  .unsealed-letter__body { font-size: 17px; line-height: 1.9; }
  .catalog-page { padding: 29px 22px; }
  .glyph-detail { grid-template-columns: 1fr; gap: 16px; padding: 17px; }
  .glyph-detail__mark { min-height: 150px; }
  .glyph-detail__mark .nushu-glyph { font-size: 68px; }
  .map-canvas { height: 250px; }
  .glyph-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .glyph-cell { min-height: 94px; }
  .nushu-glyph { font-size: 37px; }
  .link-block small { display: block; margin: 4px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .unsealed-letter--animate .unsealed-letter__fold { display: none; }
}