/* 老照片 — family page. Warm archival look, built for elderly eyes: ≥19px body, ≥52px targets, labels on everything. */
:root {
  --paper: #f4ecdf; --paper-2: #efe5d4; --card: #fffbf4; --ink: #2a2019; --ink-2: #5d5045; --ink-3: #85776a; --line: #e2d5c1;
  --accent: #8c4a26; --accent-2: #a2582f; --accent-ink: #fffaf2; --gold: #d8a346; --gold-ink: #23180a;
  --ok: #2f6b2d; --bad: #a8321b; --stage: #16110d; --warn-bg: #fff0c2; --warn-ink: #573b00;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --shadow-print: 0 1px 1px rgba(60,38,18,.08), 0 3px 8px rgba(60,38,18,.10), 0 10px 24px rgba(60,38,18,.08);
  --shadow-lift: 0 2px 4px rgba(60,38,18,.12), 0 12px 30px rgba(60,38,18,.18);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; overflow-x: hidden; }
body { background: var(--paper) url(icons/paper.png) repeat; background-size: 128px; color: var(--ink); font-family: var(--sans); font-size: 21px; line-height: 1.55;
  min-height: 100dvh; -webkit-tap-highlight-color: transparent; padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; transition: transform .12s var(--ease), background-color .2s, opacity .2s; }
button:active:not(:disabled) { transform: scale(.96); }
[hidden] { display: none !important; }
b { font-weight: 800; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.small { font-size: 18px; color: var(--ink-2); }

/* bars */
.netbar { position: sticky; top: 0; z-index: 40; background: var(--warn-bg); color: var(--warn-ink); font-size: 18px; font-weight: 700;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; text-align: center; box-shadow: 0 1px 0 #e7cf86; }
.wxbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #e6f1e1; color: #1f4d1d;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px; font-size: 18px; font-weight: 700; }
.wxbar span { flex: 1; }
.wxbar .wxx { border: 0; background: transparent; color: #2f6b2d; padding: 0 6px; text-decoration: underline; }
.netbar:not([hidden]) + .wxbar { display: none; }
.wxbar button { min-height: 48px; padding: 0 16px; border-radius: 14px; border: 2px solid #2f6b2d; background: #fff; color: #1f4d1d; font-weight: 800; font-size: 18px; white-space: nowrap; }

.top { padding: calc(18px + env(safe-area-inset-top)) 16px 2px; text-align: center; }
.wxbar:not([hidden]) ~ .top, .netbar:not([hidden]) ~ .top { padding-top: 16px; }
.top h1 { font-family: var(--serif); font-weight: 700; font-size: 42px; line-height: 1.15; margin: 0; letter-spacing: .14em; padding-left: .14em; }
.top p { margin: 2px 0 0; color: var(--ink-2); font-size: 19px; letter-spacing: .06em; }
main { max-width: 680px; margin: 0 auto; padding: 0 16px; }

.card { background: var(--card); border-radius: 20px; padding: 22px; margin-top: 18px; box-shadow: var(--shadow-print); }
.notice { text-align: center; padding: 26px 8px 4px; }
.notice .nicon { width: 76px; height: 76px; color: var(--accent); background: var(--card); border-radius: 50%; padding: 14px; box-shadow: var(--shadow-print); }
.notice h2 { font-family: var(--serif); font-size: 29px; margin: 16px 0 8px; }
.notice .big { font-size: 22px; margin: 0 0 10px; font-weight: 600; }
.notice .small { margin: 0 12px; }

#actions { margin-top: 18px; display: grid; gap: 12px; }
.shoot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 176px; border-radius: 28px;
  background: linear-gradient(180deg, #9a5530, var(--accent)); color: var(--accent-ink); font-size: 40px; font-weight: 800; letter-spacing: .14em; user-select: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 4px rgba(60,40,20,.15), 0 12px 28px rgba(110,55,20,.28); transition: transform .12s var(--ease); cursor: pointer; }
.shoot span { padding-left: .14em; }
.shoot:active { transform: scale(.97); }
.album { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 68px; border-radius: 22px;
  background: var(--card); box-shadow: var(--shadow-print); font-size: 23px; font-weight: 700; user-select: none; cursor: pointer; transition: transform .12s var(--ease); }
.album:active { transform: scale(.97); }
.album svg { width: 28px; height: 28px; color: var(--accent); }

body.has-photos .top { padding-top: calc(10px + env(safe-area-inset-top)); }
body.has-photos .top h1 { font-size: 34px; }
body.has-photos .top p { display: none; }
body.has-photos .shoot { min-height: 136px; flex-direction: row; gap: 16px; font-size: 36px; }
body.has-photos .shoot svg { width: 52px; height: 52px; }

/* hero: latest restored photo */
.hero { margin-top: 26px; }
.hero h2 { font-family: var(--serif); font-size: 25px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.hero h2 i { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(216,163,70,.25); }
/* the WHOLE photo (contain, its own aspect ratio — sized in JS), with a draggable before/after line */
.heroCard { display: block; width: 100%; padding: 10px 10px 0; background: #fffdf8; border-radius: 6px; box-shadow: var(--shadow-lift); transform: rotate(-.6deg); }
.heroFrame { display: flex; justify-content: center; }
.heroImg { --x: 50%; position: relative; width: 100%; height: 240px; overflow: hidden; background: #e6dccb; cursor: ew-resize; touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline-offset: 3px; }
.heroImg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.heroImg .before { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.heroImg .split { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.35); pointer-events: none; }
.heroImg .split b { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #241c16;
  display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 900; letter-spacing: -.05em; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.heroImg .tag { position: absolute; bottom: 10px; background: rgba(22,17,13,.72); color: #fff; font-size: 16px; font-weight: 700; padding: 2px 10px; border-radius: 10px; pointer-events: none; transition: opacity .2s; }
.heroImg .tag.l { left: 10px; } .heroImg .tag.r { right: 10px; }
.heroCap { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 4px 12px; border: 0; background: none; font-size: 19px; color: var(--ink-2); text-align: left; }
.heroCap b { color: var(--accent); white-space: nowrap; }

/* gallery = family album */
.ghead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 30px 0 2px; }
.ghead h2 { font-family: var(--serif); font-size: 29px; margin: 0; }
.saveall { min-height: 50px; padding: 0 16px; border-radius: 16px; border: 2px solid var(--accent); background: transparent; color: var(--accent); font-weight: 800; font-size: 19px; }
.keepnote { margin: 4px 0 4px; font-size: 17px; color: var(--ink-3); display: flex; gap: 6px; align-items: flex-start; }
.keepnote svg { width: 20px; height: 20px; flex: none; margin-top: 3px; }
.empty { text-align: center; padding: 18px 8px 8px; color: var(--ink-2); }
.empty svg { width: 240px; height: 150px; }
.empty .etitle { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--ink); margin: 10px 0 2px; }
.empty p { margin: 0; font-size: 19px; }
.day { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--ink-2); margin: 24px 2px 12px; display: flex; align-items: center; gap: 10px; }
.day::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.grid li { position: relative; background: #fffdf8; padding: 7px 7px 0; border-radius: 4px; box-shadow: var(--shadow-print); display: flex; flex-direction: column; }
.grid li:nth-child(4n+1) { transform: rotate(-.7deg); } .grid li:nth-child(4n+2) { transform: rotate(.5deg); }
.grid li:nth-child(4n+3) { transform: rotate(.4deg); } .grid li:nth-child(4n) { transform: rotate(-.4deg); }
.grid li.fresh { box-shadow: 0 0 0 4px var(--gold), var(--shadow-lift); }
.grid .ph { position: relative; aspect-ratio: 3 / 4; display: block; width: 100%; border: 0; padding: 0; overflow: hidden; border-radius: 1px;
  background: linear-gradient(100deg, #e9dfcf 40%, #f3ebde 50%, #e9dfcf 60%) 0 0 / 300% 100%; animation: shimmer 1.6s linear infinite; }
.grid .ph img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .35s var(--ease), filter 1.6s var(--ease); outline: 1px solid rgba(0,0,0,.08); outline-offset: -1px; }
.grid .ph img.ld { opacity: 1; }
.grid .ph.loaded { animation: none; background: #e9dfcf; }
.grid .cap { min-height: 30px; padding: 3px 2px 5px; font-family: var(--serif); font-size: 16px; color: var(--ink-3); text-align: center; letter-spacing: .04em; }
.grid li.feature { grid-column: 1 / -1; transform: rotate(-.4deg); }
.grid li.feature .ph { aspect-ratio: 4 / 3; }
.grid li.busy .ph img { filter: sepia(.75) blur(2.5px) brightness(1.05) contrast(.85); }
.grid li.busy .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,240,210,.45) 50%, transparent 70%) 0 0 / 250% 100%; animation: shimmer 2.4s linear infinite; }
.grid li.develop .ph img { animation: develop 2.2s var(--ease) both; }
@keyframes develop { 0% { filter: sepia(1) blur(6px) brightness(1.35) contrast(.6); } 100% { filter: none; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.over { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 8px 8px; background: linear-gradient(transparent, rgba(22,17,13,.78) 45%); color: #fff; z-index: 1; }
.over .ptext { font-size: 17px; font-weight: 700; text-align: center; margin-top: 6px; line-height: 1.3; }
.over .bar { background: rgba(255,255,255,.28); }
.badge { position: absolute; left: 6px; top: 6px; z-index: 1; background: rgba(255,251,244,.95); color: var(--ink); font-size: 15px; font-weight: 800; border-radius: 10px; padding: 1px 8px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge.love { color: var(--accent); }
.grid .rowbtn { min-height: 48px; margin: 6px 0 8px; border-radius: 14px; border: 0; background: var(--bad); color: #fff; font-size: 19px; font-weight: 800; }
.grid .rowbtn.plain { background: var(--paper-2); color: var(--ink); }
.line { font-size: 17px; font-weight: 700; text-align: center; line-height: 1.3; }
.line.bad { color: var(--bad); } .line.busy { color: var(--ink-2); }
.bar { height: 10px; border-radius: 5px; background: #e8dccb; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--gold), #f0c46a); transition: width .5s linear; }

.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding: 36px 16px 32px; }
.foot button { min-height: 48px; padding: 0 6px; border: 0; background: none; color: var(--ink-2); font-size: 18px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }

/* viewer */
.viewer { position: fixed; inset: 0; z-index: 50; background: var(--stage); color: #fff; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); overscroll-behavior: contain; animation: vin .22s var(--ease); }
@keyframes vin { from { opacity: 0; transform: scale(.985); } }
.vbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 0; }
.vclose { min-height: 52px; padding: 0 18px 0 12px; border-radius: 16px; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 21px; font-weight: 800; }
.vcount { font-size: 18px; color: #d9c8b1; }
.tabs { display: flex; gap: 6px; margin: 10px 12px 4px; padding: 4px; background: rgba(255,255,255,.1); border-radius: 18px; }
.tabs button { flex: 1; min-height: 50px; border-radius: 14px; border: 0; background: transparent; color: #eadccb; font-size: 20px; font-weight: 800; }
.tabs button[aria-selected="true"] { background: #fff; color: #241c16; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.vstage { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: none; }
.vtrack { position: absolute; inset: 0; will-change: transform; }
.vpane { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4px 8px; }
.vimg, .vreveal { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; transform-origin: 0 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.vreveal { position: absolute; pointer-events: none; }
.vedge { position: absolute; width: 4px; margin-left: -2px; background: linear-gradient(transparent, #ffd98a 12%, #fff 50%, #ffd98a 88%, transparent); box-shadow: 0 0 18px 6px rgba(255,210,130,.55); pointer-events: none; }
.vstate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-size: 22px; text-align: center; padding: 20px 64px; z-index: 2; background: rgba(22,17,13,.6); }
.vprog { position: absolute; left: 14px; right: 14px; bottom: 12px; background: rgba(22,17,13,.84); border-radius: 18px; padding: 12px 16px; backdrop-filter: blur(6px); }
.vprog p { margin: 8px 0 0; font-size: 19px; text-align: center; }
.vprog .bar { background: rgba(255,255,255,.2); }
.vnote { margin: 0; padding: 4px 18px 0; font-size: 16px; color: #dccab2; text-align: center; min-height: 1.4em; }
.vactions { display: grid; gap: 8px; padding: 8px 12px 12px; }
.vmain { display: grid; grid-template-columns: 1.55fr 1fr; gap: 8px; }
.vmain > :only-child, .vmain > [hidden] + * { grid-column: 1 / -1; }
.share { min-height: 66px; border-radius: 20px; border: 2px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; font-size: 24px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.share svg { width: 26px; height: 26px; flex: none; }
.save { min-height: 66px; border-radius: 20px; border: 0; background: linear-gradient(180deg, #e6b65a, var(--gold)); color: var(--gold-ink); font-size: 24px; font-weight: 900; letter-spacing: .02em; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 18px rgba(216,163,70,.25); display: flex; align-items: center; justify-content: center; gap: 10px; }
.save svg { width: 28px; height: 28px; flex: none; }
.save:disabled { opacity: .4; box-shadow: none; }
.fb { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 8px; }
.fb .moreBtn { white-space: nowrap; }
.fb button { min-height: 52px; border-radius: 16px; border: 2px solid rgba(255,255,255,.22); background: transparent; color: #fff; font-size: 20px; font-weight: 800; }
.fb .like[aria-pressed="true"] { background: #fff; color: #241c16; border-color: #fff; }
.fb .dislike[aria-pressed="true"] { background: #4a241a; border-color: #b8604a; }
.more { display: grid; gap: 10px; }
.more button { min-height: 72px; border-radius: 18px; border: 0; background: #fff; color: var(--ink); display: flex; align-items: center; gap: 14px; padding: 10px 16px; text-align: left; box-shadow: var(--shadow-print); }
.more button svg { width: 30px; height: 30px; flex: none; color: var(--accent); }
.more button b { display: block; font-size: 22px; }
.more button small { display: block; font-size: 17px; color: var(--ink-2); font-weight: 500; line-height: 1.35; }
.more .del, .more .del svg { color: var(--bad); }
.retry { min-height: 56px; border-radius: 16px; border: 0; background: var(--bad); color: #fff; font-size: 22px; font-weight: 800; }
.pop { animation: pop .35s var(--ease); }
@keyframes pop { 40% { transform: scale(1.08); } }

/* edge navigation + developing state */
.vnav { position: absolute; top: 50%; z-index: 3; width: 52px; height: 76px; margin-top: -38px; border: 0; padding: 0; background: rgba(22,17,13,.42); color: #fff;
  font-size: 40px; line-height: 1; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.vnav span { margin-top: -6px; }
.vnav.prev { left: 0; border-radius: 0 16px 16px 0; } .vnav.next { right: 0; border-radius: 16px 0 0 16px; }
.vstage.developing .vimg { filter: sepia(.8) blur(3px) brightness(1.05) contrast(.85); }
.vstage.developing .vpane::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,236,200,.22) 50%, transparent 65%) 0 0 / 250% 100%; animation: shimmer 2.6s linear infinite; pointer-events: none; }
.vimg { transition: filter .8s var(--ease); }

/* compare */
.cmp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4px 8px; touch-action: none; }
.cmp > img, .cmpAfter img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; }
.cmpAfter { position: absolute; inset: 4px 8px; display: flex; align-items: center; justify-content: center; }
.cmpLine { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.5); }
.cmpLine span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 50%; background: #fff; color: #241c16;
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; box-shadow: 0 2px 10px rgba(0,0,0,.45); }
.cmpTag { position: absolute; top: 10px; background: rgba(22,17,13,.78); color: #fff; font-size: 17px; font-weight: 700; padding: 3px 12px; border-radius: 12px; }
.cmpTag.l { left: 14px; } .cmpTag.r { right: 14px; }

/* sheets */
.sheet { position: fixed; inset: 0; z-index: 70; background: rgba(22,17,13,.6); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s var(--ease); }
.sheetBox { width: 100%; max-width: 560px; background: var(--card); color: var(--ink); border-radius: 26px 26px 0 0; padding: 24px 18px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 12px; animation: up .28s var(--ease); }
@keyframes fade { from { opacity: 0; } } @keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheetBox h3 { margin: 0; font-family: var(--serif); font-size: 27px; }
.sheetBox p { margin: 0; font-size: 19px; color: var(--ink-2); }
.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.reasons button { min-height: 60px; border-radius: 16px; border: 2px solid var(--line); background: #fff; font-size: 19px; font-weight: 800; padding: 0 4px; }
.reasons button[aria-pressed="true"] { border-color: var(--accent); background: #f6e3d6; color: var(--accent); }
button.primary { min-height: 62px; border-radius: 18px; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 23px; font-weight: 900; }
button.danger { min-height: 62px; border-radius: 18px; border: 0; background: var(--bad); color: #fff; font-size: 23px; font-weight: 900; }
button.plain { min-height: 58px; border-radius: 18px; border: 2px solid var(--line); background: #fff; font-size: 21px; font-weight: 800; }
button.link { min-height: 48px; border: 0; background: none; color: var(--ink-2); font-size: 19px; text-decoration: underline; }

/* editor */
.editor { position: fixed; inset: 0; z-index: 80; background: var(--stage); color: #fff; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.editor img, .editor .handle, .editor svg, .editor canvas { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
.ehint { margin: 0; padding: 14px 16px 4px; font-size: 21px; text-align: center; }
.ehint b { color: #ffd98a; }
.estage { flex: 1; min-height: 0; position: relative; margin: 10px 30px; touch-action: none; }
.estage img { position: absolute; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; pointer-events: none; }
.estage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.handle { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; touch-action: none; z-index: 2; }
.handle::after { content: ''; position: absolute; inset: 16px; border-radius: 50%; border: 4px solid #ffd98a; background: rgba(255,217,138,.25); box-shadow: 0 0 0 2px rgba(0,0,0,.5); transition: transform .15s var(--ease), background-color .15s; }
.handle.active::after { background: rgba(255,217,138,.6); transform: scale(1.15); }
.loupe { position: absolute; width: 140px; height: 140px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 16px rgba(0,0,0,.6); pointer-events: none; z-index: 3; }
.ebar { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 10px 12px 14px; }
.ebar button { min-height: 62px; border-radius: 18px; font-size: 21px; font-weight: 800; }
.ebar #eCancel { border: 2px solid rgba(255,255,255,.3); background: transparent; color: #fff; }

/* long-press save */
.lp { position: fixed; inset: 0; z-index: 90; background: #000; color: #fff; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.lpHint { margin: 0; padding: 14px 16px; font-size: 24px; font-weight: 900; text-align: center; background: var(--gold); color: var(--gold-ink); }
.lpImg { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; }
.lpImg img { max-width: 100%; max-height: 100%; object-fit: contain; -webkit-touch-callout: default; }
.lpClose { min-height: 62px; margin: 8px 12px 12px; border-radius: 18px; border: 0; background: #fff; color: #241c16; font-size: 23px; font-weight: 900; }

/* wechat guide */
.wxguide { position: fixed; inset: 0; z-index: 95; background: rgba(16,12,9,.97); color: #fff; }
.wxguide .arrow { position: absolute; right: 18px; top: 4px; width: 120px; height: 120px; }
.wxBox { position: absolute; left: 16px; right: 16px; top: 140px; display: grid; gap: 10px; }
.wxBox .big { font-size: 28px; font-weight: 800; margin: 0; }
.wxBox .big b { color: #ffd98a; }
.wxBox .small { color: #e8d9c4; font-size: 19px; margin: 6px 0; }
.wxBox button { min-height: 60px; border-radius: 18px; border: 0; background: #fff; color: #241c16; font-size: 23px; font-weight: 900; margin-top: 8px; }

/* welcome */
.welcome { position: fixed; inset: 0; z-index: 85; background: var(--paper) url(icons/paper.png) repeat; background-size: 128px; display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top)) 18px calc(14px + env(safe-area-inset-bottom)); overflow-y: auto; }
.wstep { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 560px; margin: 0 auto; width: 100%; }
.wstep:not([hidden]) > * { animation: rise .45s var(--ease) both; }
.wstep:not([hidden]) > *:nth-child(2) { animation-delay: .06s; } .wstep:not([hidden]) > *:nth-child(3) { animation-delay: .12s; } .wstep:not([hidden]) > *:nth-child(4) { animation-delay: .18s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.wstep h2 { font-family: var(--serif); font-size: 32px; margin: 8px 0; text-align: center; }
.wstep p { font-size: 21px; margin: 6px 0; text-align: center; }
.wstep .hero { width: 200px; height: 140px; margin: 0 auto; display: block; }
.wstep .hero.dev { width: 230px; height: 172px; filter: drop-shadow(0 8px 14px rgba(60,38,18,.18)); }
.wstep .hero.dev g { animation: devloop 5s var(--ease) infinite; }
@keyframes devloop { 0%, 18% { filter: sepia(1) saturate(.5) brightness(1.1) contrast(.75) blur(1.2px); } 55%, 100% { filter: none; } }
.paired { align-self: center; display: inline-flex; align-items: center; gap: 8px; background: #e3f0de; color: #24561f; font-size: 18px; font-weight: 800; padding: 6px 14px; border-radius: 20px; margin-bottom: 8px; }
.tips3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tips3 li { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center; background: var(--card); border-radius: 18px; padding: 12px; box-shadow: var(--shadow-print); }
.tips3 svg { width: 104px; height: 78px; }
.tips3 b { display: block; font-size: 23px; }
.tips3 span { font-size: 18px; color: var(--ink-2); }
#a2hs { display: grid; gap: 10px; }
#a2hs ol { margin: 0; padding-left: 1.3em; font-size: 20px; }
#a2hs li { margin: 6px 0; }
#a2hs .note { font-size: 17px; color: var(--ink-2); text-align: center; }
.wnav { display: grid; gap: 8px; max-width: 560px; margin: 10px auto 0; width: 100%; }
.dots { display: flex; justify-content: center; gap: 10px; margin-bottom: 4px; }
.dots i { width: 10px; height: 10px; border-radius: 5px; background: var(--line); transition: width .3s var(--ease), background-color .3s; }
.dots i.on { background: var(--accent); width: 28px; }

/* snackbar: bottom, above whatever action area is showing */
.toast { position: fixed; left: 50%; bottom: var(--toast-bottom, calc(24px + env(safe-area-inset-bottom))); transform: translateX(-50%) translateY(16px);
  width: max-content; max-width: min(320px, calc(100% - 32px)); background: #221912; color: #fff; padding: 8px 12px; border-radius: 14px; font-size: 19px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 600;
  opacity: 0; pointer-events: none; transition: transform .25s var(--ease); z-index: 120; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- staged progress: 找照片 → 校正 → AI 修复 → 放大高清 → 人脸保真 → 完成 (lit by the server's real stage) ---- */
.steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.steps .trk { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 7px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.steps .trk span { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--gold), #f3cf7f); transition: width .5s linear; }
.steps .st { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.steps .st i { width: 18px; height: 18px; border-radius: 50%; background: #4a3d32; border: 3px solid rgba(255,255,255,.3); box-sizing: border-box; transition: background .3s, border-color .3s; }
.steps .st b { font-size: clamp(11px, 3.3vw, 15px); font-weight: 600; letter-spacing: -.01em; color: rgba(255,255,255,.55); white-space: nowrap; }
.steps .st.done i { background: var(--gold); border-color: var(--gold); }
.steps .st.done b { color: rgba(255,255,255,.85); }
.steps .st.cur i { background: #fff; border-color: var(--gold); animation: nodepulse 1.6s var(--ease) infinite; }
.steps .st.cur b { color: #fff; font-weight: 800; }
@keyframes nodepulse { 0% { box-shadow: 0 0 0 0 rgba(216,163,70,.65); } 70%, 100% { box-shadow: 0 0 0 9px rgba(216,163,70,0); } }
.steps.mini .trk { top: 3px; height: 3px; }
.steps.mini .st i { width: 9px; height: 9px; border-width: 2px; }
.over .ptext { font-size: 16px; }
.vprog .steps { margin: 4px 0 2px; }
.vprog p.ptext { margin: 12px 0 0; font-size: 18px; font-weight: 700; line-height: 1.35; }

/* ---- capture hint (soft, never blocking) ---- */
.hint { padding: 6px 2px 8px; text-align: center; }
.hint p { margin: 0 0 6px; font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.hint div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hint button { min-height: 44px; border-radius: 12px; border: 0; font-size: 15px; font-weight: 800; padding: 0 2px; white-space: nowrap; letter-spacing: -.02em; }
.hint [data-h="ok"] { background: var(--accent); color: var(--accent-ink); }
.hint [data-h="re"] { background: var(--paper-2); color: var(--ink); }
.vhint { padding: 0 14px; }
.vhint .hint { display: flex; align-items: center; gap: 10px; padding: 8px 0 0; text-align: left; }
.vhint .hint p { flex: 1; margin: 0; color: #f2dfb8; font-size: 17px; }
.vhint .hint div { flex: none; grid-template-columns: auto auto; }
.vhint .hint button { min-height: 44px; padding: 0 12px; }
.vhint [data-h="re"] { background: rgba(255,255,255,.14); color: #fff; }

/* ---- 「再修一版」 version chips ---- */
.vers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 2px 12px 8px; }
.vers button { min-height: 44px; padding: 0 14px; border-radius: 22px; border: 2px solid rgba(255,255,255,.25); background: transparent; color: #fff; font-size: 18px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.vers button small { font-size: 13px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,.18); }
.vers button[aria-pressed="true"] { background: #fff; color: #241c16; border-color: #fff; }
.vers button[aria-pressed="true"] small { background: #efe2c9; color: #5d4020; }
.vers .use { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
button.secondary { min-height: 54px; border-radius: 18px; border: 2px solid var(--line); background: #fff; color: var(--accent); font-size: 20px; font-weight: 800; }

/* ---- switch (share sheet: 附上修复工具链接) ---- */
.switch { display: flex; align-items: center; gap: 14px; padding: 4px 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .sw { flex: none; position: relative; width: 56px; height: 32px; border-radius: 16px; background: #d9ccb8; transition: background .2s var(--ease); }
.switch .sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.switch input:checked + .sw { background: var(--ok); }
.switch input:checked + .sw::after { transform: translateX(24px); }
.switch input:focus-visible + .sw { outline: 3px solid var(--gold); outline-offset: 2px; }
.switch .ctext b { display: block; font-size: 20px; color: var(--ink); }
.switch .ctext small { display: block; font-size: 16px; color: var(--ink-3); line-height: 1.35; }

/* ---- share sheet ---- */
.shPrev { display: flex; justify-content: center; align-items: center; height: min(40vh, 300px); background: var(--paper-2); border-radius: 14px; padding: 10px; }
.shPrev img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: var(--shadow-print); background: #fff; opacity: 0; transition: opacity .25s var(--ease); }
.shPrev img.ld { opacity: 1; }
.shPrev.loading { background: linear-gradient(100deg, #e9dfcf 40%, #f3ebde 50%, #e9dfcf 60%) 0 0 / 300% 100%; animation: shimmer 1.6s linear infinite; }

/* ---- 上色 (B&W prints, after the restore) ---- */
.vers .color { border-color: transparent; background: linear-gradient(100deg, #c9663a, #d8a346 45%, #5f9a5a 80%, #4f7fb0); color: #fff; padding: 0 16px; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.vers .color svg { width: 22px; height: 22px; flex: none; }
.vers .color small { background: rgba(0,0,0,.22); }

/* ---- 家: family switcher (admin devices only) ---- */
.famBtn { margin: 6px auto 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 2px solid var(--line); background: var(--card); color: var(--ink-2); font-size: 17px; font-weight: 800; }
.famBtn svg { width: 20px; height: 20px; color: var(--accent); }
.famBtn i { font-style: normal; font-size: 13px; color: var(--ink-3); }
.fambar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #efe0c8; color: #5a3416; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; font-size: 18px; font-weight: 800; }
.fambar span { flex: 1; }
.fambar button { min-height: 46px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--accent); background: #fff; color: var(--accent); font-weight: 800; font-size: 17px; white-space: nowrap; }
.fambar:not([hidden]) ~ .top { padding-top: 12px; }
.famList { display: grid; gap: 10px; }
.famList button { min-height: 60px; border-radius: 16px; border: 2px solid var(--line); background: #fff; font-size: 21px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
.famList button[aria-pressed="true"] { border-color: var(--accent); background: #f6e3d6; color: var(--accent); }
.famList button small { font-size: 15px; font-weight: 700; color: var(--ink-3); }

/* ---- large system text: html[data-text="big"] (≥120 %) / "xl" (≥160 %), set from the #tzProbe measurement.
   Designed sizes shrink a little so that, multiplied by the user's text scale, they stay at least as big as normal —
   but buttons and labels stop pushing the photos off the screen. ---- */
.tzprobe { position: absolute; left: -999px; top: 0; font-size: 20px; line-height: 1; visibility: hidden; pointer-events: none; }
.sm { display: none; }
.top h1, .hero h2, .ghead h2, .day, .vcount, .famBtn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ghead h2 { flex: 1; }
.sheetBox { max-height: 100dvh; overflow-y: auto; }
html[data-text] .top { padding-bottom: 0; }
html[data-text] .top h1, html[data-text] body.has-photos .top h1 { font-size: 28px; letter-spacing: .08em; }
html[data-text] .top p { display: none; }
html[data-text] #actions { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
html[data-text] .shoot, html[data-text] body.has-photos .shoot { min-height: 78px; flex-direction: row; gap: 8px; font-size: 24px; letter-spacing: .04em; border-radius: 22px; padding: 6px 8px; }
html[data-text] .shoot svg, html[data-text] body.has-photos .shoot svg { width: 30px; height: 30px; flex: none; }
html[data-text] .album { min-height: 78px; flex-direction: column; gap: 0; font-size: 16px; line-height: 1.2; padding: 6px; text-align: center; border-radius: 22px; }
html[data-text] .album svg { width: 22px; height: 22px; }
html[data-text] .hero { margin-top: 16px; }
html[data-text] .hero h2 { font-size: 20px; margin-bottom: 6px; }
html[data-text] .heroCap { font-size: 15px; }
html[data-text] .ghead { margin-top: 20px; }
html[data-text] .ghead h2 { font-size: 22px; }
html[data-text] .saveall { font-size: 15px; padding: 0 10px; min-height: 44px; white-space: nowrap; }
html[data-text] .keepnote { font-size: 13px; }
html[data-text] .day { font-size: 16px; }
html[data-text] .grid { gap: 12px 10px; }
html[data-text] .grid .cap { font-size: 12px; }
html[data-text] .over .ptext { font-size: 12px; }
html[data-text] .badge { font-size: 11px; }
html[data-text] .hint p { font-size: 11px; }
html[data-text] .hint div { grid-template-columns: 1fr; gap: 4px; }
html[data-text] .hint button { font-size: 12px; min-height: 38px; white-space: normal; line-height: 1.15; }
html[data-text] .grid .rowbtn { font-size: 15px; }
html[data-text] .foot button { font-size: 15px; }
/* viewer: the photo keeps the room */
html[data-text] .vbar { padding-top: 4px; }
html[data-text] .vclose { min-height: 44px; font-size: 17px; }
html[data-text] .vcount { font-size: 13px; }
html[data-text] .tabs { margin: 6px 12px 2px; }
html[data-text] .tabs button { min-height: 42px; font-size: 16px; }
html[data-text] .vers { padding-bottom: 4px; gap: 6px; }
html[data-text] .vers button { min-height: 38px; font-size: 14px; padding: 0 10px; }
html[data-text] .vers button small { font-size: 10px; }
html[data-text] .vnote { font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html[data-text] .vactions { gap: 6px; padding: 6px 10px 8px; }
html[data-text] .vmain .lg { display: none; }
html[data-text] .vmain .sm { display: inline; }
html[data-text] .save, html[data-text] .share { min-height: 54px; font-size: 20px; gap: 6px; border-radius: 16px; }
html[data-text] .save svg, html[data-text] .share svg { width: 22px; height: 22px; }
html[data-text] .vmain { grid-template-columns: 1fr 1fr; }
html[data-text] .fb { gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-text] .fb button { min-height: 46px; font-size: 16px; padding: 0 4px; white-space: nowrap; }
html[data-text] .fb .lg { display: none; }
html[data-text] .steps .st b { display: none; }
html[data-text] .vprog { padding: 10px 12px; }
html[data-text] .vprog p.ptext { font-size: 15px; margin-top: 8px; }
html[data-text] .vhint .hint p { font-size: 13px; }
html[data-text] .vhint .hint button { font-size: 13px; min-height: 40px; }
html[data-text] .famBtn { font-size: 14px; min-height: 40px; }
html[data-text] .fambar, html[data-text] .wxbar, html[data-text] .netbar { font-size: 14px; }
html[data-text] .fambar button, html[data-text] .wxbar button { font-size: 14px; min-height: 40px; padding: 0 10px; }
html[data-text] .sheetBox h3 { font-size: 21px; }
html[data-text] .more button { min-height: 60px; }
html[data-text] .more button b { font-size: 18px; }
html[data-text] .more button small { font-size: 13px; }
html[data-text] button.primary, html[data-text] button.danger { min-height: 54px; font-size: 19px; }
html[data-text] .switch .ctext b { font-size: 16px; }
html[data-text] .switch .ctext small { font-size: 13px; }
html[data-text] .shPrev { height: min(32vh, 260px); }
html[data-text] .toast { font-size: 15px; }
html[data-text="xl"] .top h1, html[data-text="xl"] body.has-photos .top h1 { font-size: 23px; }
html[data-text="xl"] .shoot, html[data-text="xl"] body.has-photos .shoot { font-size: 19px; min-height: 70px; }
html[data-text="xl"] .album { font-size: 13px; min-height: 70px; }
html[data-text="xl"] .tabs button { font-size: 13px; min-height: 38px; }
html[data-text="xl"] .vclose { font-size: 14px; min-height: 40px; }
html[data-text="xl"] .save, html[data-text="xl"] .share { font-size: 16px; min-height: 48px; }
html[data-text="xl"] .fb button { font-size: 13px; min-height: 42px; }
html[data-text="xl"] .vers button { font-size: 12px; min-height: 34px; }
html[data-text="xl"] .hero h2, html[data-text="xl"] .ghead h2 { font-size: 17px; }
html[data-text="xl"] .hint button { font-size: 10px; }
html[data-text="xl"] .vnote { -webkit-line-clamp: 1; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Stories stay below the photograph; the viewer scrolls at large system fonts. */
.viewer { overflow-y: auto; }
.viewer > * { flex-shrink: 0; }
.viewer .vstage { flex: 1 0 42vh; min-height: 42vh; }
.stories { margin: 4px 12px 12px; padding: 12px; background: #f4ecdf; color: #38291e; border-radius: 12px; overflow-wrap: anywhere; }
.stories button, .audioPick { min-height: 52px; padding: 12px 16px; font-size: 20px; border-radius: 12px; color: #fff; background: #7a4120; border: 0; margin: 4px 0; }
#storyStart { width: 100%; margin: 0; }
#storyMessage:empty, #storyList:empty { display: none; }
.stories p, .stories summary { font-size: 20px; line-height: 1.6; }
.stories summary { min-height: 48px; cursor: pointer; }
.stories article { border-top: 1px solid #b9a18a; padding-top: 12px; margin-top: 16px; }
.stories audio { display: block; width: 100%; min-width: 0; margin: 8px 0; }
#storyTimer { display: block; font-size: 32px; }
#storyMeter { width: 100%; height: 24px; display: block; }
.audioPick { display: block; width: 100%; }
.storyBadge { position: absolute; bottom: 10px; right: 10px; background: #fff; padding: 6px; border-radius: 50%; }

/* Elder review, round 1: readable controls at every system text size. */
html[data-text] .hint button, html[data-text] .vhint .hint button,
html[data-text] .vclose, html[data-text] .tabs button, html[data-text] .vers button,
html[data-text] .fb button, html[data-text] .famBtn, html[data-text] .fambar button,
html[data-text] .wxbar button { min-height: 48px; }
html[data-text] .vnote { display: block; overflow: visible; -webkit-line-clamp: unset; }
.stories small { display: block; font-size: 16px; line-height: 1.6; color: #61472f; }
.stories button { white-space: normal; max-width: 100%; }
#storyReview { display: flex; flex-wrap: wrap; gap: 8px; }
#storyReview audio { flex-basis: 100%; }
#storyReview button { flex: 1 1 80px; }

/* Elder review, round 2: full labels, quieter home, and room for long family names. */
.hint button, .vhint .hint button, .vers button, .famBtn, .fambar button,
html[data-text] .saveall { min-height: 48px; }
.top h1, .hero h2, .ghead h2, .day, .vcount, .famBtn span {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}
.famBtn { max-width: 100%; }
.vcount { text-align: right; padding-left: 8px; }
.switch { min-height: 56px; }
#shStory { width: 24px; height: 24px; flex-shrink: 0; accent-color: #7a4120; }
.grid .cap, .keepnote { color: #655344; }
button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid #a2582f; outline-offset: 3px; }
.stories button:disabled { opacity: .65; }

/* Claude review 3: clear priorities and readable audio controls. */
body:has(#toast.show) .vnote { visibility: hidden; }
#storyStop { width: 100%; font-weight: 700; }
#storySave { font-weight: 700; }
#storyListen, #storyRedo { background: #fff8ed; color: #7a4120; border: 1px solid #7a4120; }
#storyCancel { background: transparent; color: #61472f; text-decoration: underline; }
html[data-text="big"] #storyReview, html[data-text="xl"] #storyReview { flex-direction: column; }
html[data-text="big"] #storyReview button, html[data-text="xl"] #storyReview button { flex: auto; width: 100%; }
.storyPlayback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.storyTime { font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.memoryEntries {display:grid;gap:12px;margin:20px 0}
.memoryEntries button,.memoryPanel button {min-height:56px;white-space:normal;overflow-wrap:anywhere;padding:14px;font-size:22px;border:1px solid #b4977a;border-radius:12px;background:#fff9ef;color:#653719}
.memoryPanel {position:fixed;inset:0;z-index:60;background:#faf4e8;overflow:auto;padding:20px;box-sizing:border-box;font-size:22px;line-height:1.6}
.memoryPanel[hidden] {display:none}
.memoryPanel #memoryBody {max-width:680px;margin:auto;display:grid;gap:16px}
.memoryPanel img,.memoryPanel video,.memoryPanel audio {max-width:100%}
.memoryPanel button,.memoryPanel input:not([type=checkbox]),.memoryPanel select {width:100%;box-sizing:border-box;min-width:0}
.memoryPanel input,.memoryPanel select {font-size:22px;padding:12px}
.memoryPanel input[type=checkbox] {width:28px;height:28px;flex-shrink:0}
.memoryPanel #storyStart {min-height:100px;font-size:28px;background:#7a4120;color:#fff}
.memoryPanel .interviewQuestion {font-size:30px;line-height:1.6}
.memoryPhoto {display:flex;align-items:center;gap:12px;min-height:80px;padding:8px;flex-wrap:wrap}
.memoryPhoto img {width:100px;height:90px;object-fit:contain}
.memoryPanel article {border-top:1px solid #b4977a;padding:16px 0;overflow-wrap:anywhere}
.thinking {animation:memoryBreath 2.5s ease-in-out infinite}
@keyframes memoryBreath {50% {opacity:.55}}
@media(prefers-reduced-motion:reduce) {.thinking {animation:none}}

/* Round 2: the same paper, ink and print margins as the family album. */
.memoryPanel {background:var(--paper) url('icons/paper.png');padding:16px 20px 32px;color:var(--ink)}
.memoryPanel h2 {font:600 25px/1.3 var(--serif);max-width:680px;margin:18px auto;color:#7a4120}
.memoryPanel h3 {font-family:var(--serif);font-size:23px}
.memoryPanel p {margin:8px 0;white-space:pre-line}
.memoryPanel #memoryBack {width:auto;min-height:48px;padding:8px 16px;background:transparent;border:0}
.memoryPanel article {background:#fffcf6;border:1px solid var(--line);padding:16px;box-shadow:0 3px 8px #49301a12}
.memoryPanel article img {display:block;box-sizing:border-box;padding:8px;background:white;margin:12px auto;max-height:48vh;object-fit:contain}
.memoryPanel audio[hidden] {display:none!important}
.memoryPanel video {display:block;width:100%;max-height:55vh;background:#f4ecdf;object-fit:contain}
.memoryPanel #filmSave,.memoryPanel #filmCreate,.memoryPanel #filmRender,.memoryPanel #storyStart,.memoryPanel #storySave {background:#7a4120;color:#fff;border-color:#7a4120;font-weight:600}
.memoryPanel .quietDanger {background:transparent;color:#9b3029;border:0;margin-top:20px}
.memoryPanel .interviewQuestion {font:600 25px/1.4 var(--serif);margin:8px 0}
.memoryPanel .readToggle {display:flex;gap:14px;align-items:center;min-height:56px;cursor:pointer}
.memoryPanel #answerRecorder {position:sticky;bottom:0;background:var(--paper) url('icons/paper.png');z-index:2;padding:8px 0}
.memoryPanel #storyStart {min-height:64px;font-size:24px}
.memoryPanel .memoryPhoto {background:#fffaf3;border:1px solid var(--line)}
html[data-text] .memoryPanel {padding:8px 16px 24px}
html[data-text] .memoryPanel h2 {font-size:18px;margin:8px auto}
html[data-text] .memoryPanel .interviewQuestion {font-size:21px;line-height:1.25}
html[data-text] .memoryPanel #memoryBody {gap:8px}
html[data-text] .memoryPanel #storyStart {font-size:21px;min-height:56px;padding:10px}

.trustMenu {max-width:680px;margin:12px auto;font-size:20px;text-align:left}
.trustMenu summary {min-height:44px;cursor:pointer;color:#7a4120}
.trustMenu a,.trustMenu button {display:block;padding:14px;color:#7a4120;font:inherit;background:transparent;border:0}
.trustMenu button[hidden] {display:none}
#inviteQR {max-width:280px;margin:auto;background:white;padding:8px}
#inviteQR svg {display:block;width:100%}
.trustPage {max-width:680px;margin:32px auto;padding:20px;font-size:22px;line-height:1.7}
.trustPage h1,.trustPage h2 {font-family:var(--serif);color:#7a4120}
.trustPage .download {display:block;background:#7a4120;color:white;padding:16px;text-align:center;border-radius:12px}