:root {
  --bg:#f6f3eb; --ink:#292f28; --muted:#68705f; --line:#deded0;
  --green:#405742; --card:#fffdf8; --safe-bottom:env(safe-area-inset-bottom,0px);
}
* { box-sizing:border-box }
html { scroll-padding-bottom:100px; -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft Yahei",sans-serif; font-size:16px; line-height:1.5 }
a { color:inherit; text-decoration:none }
button,input,textarea { font:inherit }
button,a,input,textarea { touch-action:manipulation; -webkit-tap-highlight-color:transparent }
button { cursor:pointer; border:1px solid var(--line); background:transparent; border-radius:12px; min-height:46px; padding:11px 17px; color:var(--ink) }
button:disabled { opacity:.5; cursor:wait }
a:focus-visible,button:focus-visible { outline:3px solid #8fa080; outline-offset:4px }
button:active,.card:active { opacity:.8 }
header { max-width:1200px; margin:auto; padding:25px 36px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line) }
.brand { font-size:20px; font-weight:650; display:flex; align-items:center; gap:12px }
.brand-icon { display:grid; place-items:center; width:35px; height:35px; background:var(--green); color:#fff; border-radius:50%; font-size:23px }
.brand-sub { font-size:11px; font-weight:400; letter-spacing:2px; border-left:1px solid var(--line); padding-left:15px; margin-left:5px; color:var(--muted) }
.manage { color:var(--muted); font-size:13px; min-height:44px; display:inline-flex; align-items:center; padding:0 9px }
.muted { color:var(--muted); font-size:14px; line-height:1.8 }
main { max-width:1200px; margin:auto; padding:45px 36px 70px; min-height:calc(100svh - 180px) }
.eyebrow { color:var(--muted); letter-spacing:2px; font-size:12px; margin:0 0 10px }
h1,h2,h3 { font-family:"Songti SC","STSong",serif }
h1 { font-size:38px; font-weight:600; margin:0; letter-spacing:1px; line-height:1.4; overflow-wrap:anywhere }
h2 { font-size:25px; font-weight:600; margin:0; line-height:1.5 }
h3 { font-size:20px; margin:14px 0 7px; overflow-wrap:anywhere }
.topline { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px }
.count { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; flex-shrink:0 }
.tabs { display:flex; gap:28px; border-bottom:1px solid var(--line); margin-bottom:28px }
.tab { padding:14px 0; min-height:48px; color:var(--muted) }
.tab small { margin-left:5px; opacity:.7 }
.tab.active { color:var(--green); border-bottom:2px solid var(--green); font-weight:600 }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 24px }
.card { min-width:0; display:block }
.cover { aspect-ratio:4/3; background:linear-gradient(140deg,#e5e7da,#d9ddcf); border-radius:14px; overflow:hidden; position:relative; display:grid; place-items:center }
.cover img { width:100%; height:100%; object-fit:cover; transition:transform .4s }
.film { border:1px solid #b8bdab; border-radius:10px; padding:22px 28px; color:#78846f; font-size:32px }
.cover .badge { position:absolute; bottom:12px; right:12px; background:#253526e8; color:white; padding:6px 10px; font-size:12px; border-radius:7px; font-variant-numeric:tabular-nums }
.card p { font-size:14px; color:var(--muted); line-height:1.7; margin:5px 0; overflow-wrap:anywhere }
.empty { border:1px dashed #cbd0bf; border-radius:16px; padding:40px 22px; text-align:center; background:#ffffff40 }
.empty-symbol { font-size:29px; color:#89947b; margin-bottom:12px }
.empty h3 { font-size:22px; margin:0 0 10px }
.empty p { color:var(--muted); line-height:1.9; margin:0; font-size:14px }
.section-head { display:flex; justify-content:space-between; align-items:center; margin:45px 0 22px; gap:12px }
.section-head a { font-size:13px; color:var(--green); min-height:44px; display:flex; align-items:center }
.primary { background:var(--green); color:white; border-color:var(--green) }
.back { display:inline-flex; align-items:center; min-height:44px; font-size:14px; color:var(--muted); margin-bottom:15px }
.detail-layout { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(270px,1fr); gap:38px }
.player-wrap { background:#161d17; border-radius:14px; overflow:hidden }
video { display:block; width:100%; max-height:65svh; aspect-ratio:4/3 }
.player-actions { display:flex; align-items:center; gap:10px; padding:16px 0 }
.player-actions button { display:flex; justify-content:center; align-items:center; gap:8px; white-space:nowrap }
.player-actions .primary { flex:1 }
#videoError:empty { display:none }
.intro { padding:24px 0; border-top:1px solid var(--line) }
.intro p,.post-body { white-space:pre-wrap; line-height:1.9; overflow-wrap:anywhere }
.intro p { color:#59604f; margin-bottom:0 }
.side { padding-left:25px; border-left:1px solid var(--line); min-width:0 }
.side h2 { margin-bottom:20px }
.mini-moment { display:grid; grid-template-columns:95px minmax(0,1fr); gap:14px; margin-bottom:20px }
.mini-moment .cover { border-radius:9px }
.mini-moment .badge { bottom:5px; right:5px; padding:3px 5px; font-size:11px }
.mini-moment h3 { font-size:16px; margin:0 0 7px; line-height:1.6 }
.mini-moment p { font-size:12px; color:var(--muted); margin:0 }
.comments { margin-top:28px; scroll-margin-top:20px }
.comment { padding:20px 0; border-bottom:1px solid var(--line) }
.post-meta { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); gap:12px }
.post-meta strong { font-size:15px; color:var(--green) }
label { display:block; font-size:14px; margin:18px 0 8px }
input,textarea { display:block; width:100%; background:var(--card); border:1px solid var(--line); padding:13px; border-radius:12px; color:var(--ink); margin-top:8px; font-size:16px; min-height:48px }
textarea { min-height:110px; resize:vertical; line-height:1.7 }
input:focus,textarea:focus { outline:2px solid #99a68b; outline-offset:1px }
.form-row { display:flex; align-items:end; justify-content:space-between; gap:14px }
.form-row label { max-width:240px; flex:1; margin-bottom:0 }
.error,[role=alert] { color:#a44232; font-size:14px }
footer { max-width:1128px; margin:0 auto; padding:23px 0; border-top:1px solid var(--line); font-size:12px; color:var(--muted); display:flex; gap:12px }
dialog { width:min(520px,calc(100% - 32px)); border:1px solid var(--line); border-radius:20px; background:var(--bg); padding:25px; color:var(--ink); max-height:90svh; overflow:auto; overscroll-behavior:contain }
dialog::backdrop { background:#18231999; backdrop-filter:blur(4px) }
body.sheet-open { overflow:hidden }
.dialog-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:10px }
.icon-button { font-size:28px; border:0; min-width:44px; min-height:44px; padding:0 }
#capturePreview img { width:100%; max-height:230px; object-fit:contain; background:#20271e; border-radius:12px; display:block }
.capture-placeholder { padding:40px; text-align:center; background:#e5e5d8; border-radius:12px }
.adjust { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:12px }
.adjust button { font-size:14px; padding:8px 16px; min-height:44px }
#captureTime { font-variant-numeric:tabular-nums; font-weight:650 }
#momentForm>.primary { width:100%; margin-top:10px }
#toast { position:fixed; bottom:calc(95px + var(--safe-bottom)); left:50%; transform:translateX(-50%); background:#293e2d; color:white; border-radius:12px; padding:13px 20px; display:none; z-index:5; width:max-content; max-width:calc(100vw - 32px); box-shadow:0 6px 25px #1b2c2420 }
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px }
.admin-item { border-bottom:1px solid var(--line); padding:18px 0 }
.admin-item button { font-size:14px; margin:8px 6px 0 0 }
.login { max-width:400px; margin:30px auto }
.login .primary { margin-top:20px; width:100% }
.number { font-variant-numeric:tabular-nums; color:#929982; font-size:13px; margin-right:8px }
.load-error { max-width:500px; margin:60px auto; text-align:center }
#mobileNav { display:none }
@media(hover:hover) { button:hover { background:#e9ecdf } .primary:hover { background:#314732 } .card:hover .cover img { transform:scale(1.035) } }
@media(max-width:850px) {
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .detail-layout,.admin-grid { grid-template-columns:1fr }
  .side { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:25px }
  .brand-sub { display:none }
  header { padding:16px 24px }
  main { padding:30px 24px 45px }
  footer { margin:0 24px }
  .grid { gap:25px 18px }
}
@media(max-width:600px) {
  body { padding-bottom:calc(76px + var(--safe-bottom)) }
  header { padding:8px 16px; border:0; min-height:64px }
  .brand { font-size:18px; gap:10px }
  .brand-icon { width:32px; height:32px; font-size:21px }
  .manage { font-size:13px }
  main { padding:22px 18px 28px; min-height:calc(100svh - 205px) }
  h1 { font-size:29px; letter-spacing:0 }
  h2 { font-size:23px }
  .topline { align-items:start; flex-direction:column; gap:9px; margin-bottom:22px }
  .eyebrow { font-size:12px; letter-spacing:1px; margin-bottom:8px }
  .count { font-size:13px }
  .tabs { background:#e9ebdf; border:0; border-radius:14px; padding:4px; gap:4px; margin-bottom:24px }
  .tab { flex:1; text-align:center; padding:11px 6px; min-height:46px; border-radius:11px; font-size:15px }
  .tab.active { border:0; background:var(--card); box-shadow:0 2px 5px #203a2310 }
  .grid { grid-template-columns:1fr; gap:25px }
  .card { background:var(--card); padding:9px 9px 15px; border:1px solid #e9e7dc; border-radius:20px; box-shadow:0 4px 16px #30402c04 }
  .cover { border-radius:13px }
  .card h3 { margin:13px 6px 6px; font-size:21px; line-height:1.5 }
  .card p { margin:0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
  .badge { min-height:28px }
  .empty { padding:30px 18px; border-radius:17px }
  .empty-symbol { margin-bottom:9px; font-size:26px }
  .empty h3 { font-size:20px }
  .empty p { font-size:14px }
  .section-head { margin:29px 0 15px }
  .section-head a { font-size:12px }
  .moment-rail { display:flex; gap:13px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 18px 8px; margin:0 -18px; scrollbar-width:none }
  .moment-rail::-webkit-scrollbar { display:none }
  .moment-rail .card { flex:0 0 78%; scroll-snap-align:center }
  .moment-card h3 { font-size:18px }
  .moment-card p { font-size:13px }
  #mobileNav { display:flex; position:fixed; z-index:3; left:0; right:0; bottom:0; background:#fffcf6f7; border-top:1px solid #e2e4d8; padding:7px 12px calc(7px + var(--safe-bottom)); box-shadow:0 -5px 22px #2a3b2406 }
  #mobileNav a { flex:1; min-height:51px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:12px; color:var(--muted); border-radius:12px }
  #mobileNav a[aria-current=page] { color:var(--green); font-weight:650; background:#eaf0e3 }
  footer { margin:0 18px; padding:20px 0; font-size:11px; justify-content:center }
  [data-page=detail] #mobileNav,[data-page=admin] #mobileNav { display:none }
  [data-page=admin] { padding-bottom:var(--safe-bottom) }
  [data-page=detail] main { padding-top:0 }
  [data-page=detail] .back { margin-bottom:5px }
  [data-page=detail] .topline { margin-bottom:17px }
  [data-page=detail] h1 { font-size:26px }
  .detail-layout { display:flex; flex-direction:column; gap:0 }
  .detail-layout>div { display:contents }
  .player-wrap { order:0; margin:0 -18px; border-radius:0 }
  video { max-height:55svh; aspect-ratio:4/3 }
  #videoError { order:1; font-size:13px; margin:12px 0 0 }
  .intro { order:2; border-top:0; padding:25px 0 }
  .intro p { font-size:16px; margin-top:10px }
  .side { order:3; padding:23px 0 8px }
  .side h2 { font-size:22px; margin-bottom:17px }
  .mini-moment { grid-template-columns:112px minmax(0,1fr); min-height:84px; gap:13px; padding:9px; border:1px solid #e9e7dc; background:var(--card); border-radius:14px; margin-bottom:12px }
  .mini-moment h3 { font-size:16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
  .mini-moment .cover { height:84px }
  .comments { order:4; margin-top:10px; border-top:1px solid var(--line); padding-top:24px; scroll-margin-top:12px }
  #commentForm { margin-top:16px; background:#efeee4; border-radius:17px; padding:1px 15px 14px }
  #commentForm textarea { min-height:100px }
  .post-body { font-size:16px }
  .player-actions { position:fixed; z-index:3; left:0; right:0; bottom:0; padding:10px 14px calc(10px + var(--safe-bottom)); background:#fffcf6f7; border-top:1px solid var(--line); gap:8px; box-shadow:0 -5px 22px #2a3b2406 }
  .player-actions button { font-size:12px; gap:3px; flex-direction:column; padding:5px 11px; min-width:58px; min-height:51px; border:0; border-radius:13px }
  .player-actions .primary { flex-direction:row; gap:9px; font-size:15px; padding:12px }
  dialog { margin:auto 0 0; width:100%; max-width:none; max-height:calc(100dvh - 18px); border-radius:24px 24px 0 0; border:0; padding:12px 20px calc(20px + var(--safe-bottom)) }
  dialog::before { content:""; display:block; height:4px; width:36px; background:#c4cbb9; border-radius:5px; margin:0 auto 10px }
  .dialog-top { margin-bottom:12px }
  .dialog-top h2 { font-size:23px }
  #capturePreview img { max-height:26svh }
  dialog label { margin-top:13px }
  dialog textarea { min-height:85px }
  #captureHint { font-size:13px; margin-bottom:0 }
  #momentForm>.primary { min-height:50px; position:sticky; bottom:0; box-shadow:0 0 0 5px var(--bg) }
  .admin-grid { gap:30px }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important } }
.checkbox-label { display:flex; align-items:center; gap:10px; line-height:1.6; }
.checkbox-label input { flex:0 0 22px; width:22px; height:22px; min-height:22px; margin:0; accent-color:var(--green); }
/* Older family members are the default audience, not an optional mode. */
:root { --muted:#505b49; --line:#cbd1c1; --green:#2e5135; --reading-size:20px; }
body { font-size:var(--reading-size); line-height:1.75; }
h1,h2,h3 { font-family:inherit; font-weight:650; }
button { min-height:56px; font-size:18px; font-weight:600; }
input,textarea { font-size:20px; min-height:56px; padding:14px; line-height:1.7; }
label { font-size:19px; font-weight:600; }
.muted,.card p,.intro p,.post-body,.empty p { font-size:var(--reading-size); line-height:1.85; }
.eyebrow,.count,.post-meta,.mini-moment p { font-size:16px; color:var(--muted); }
.brand { font-size:21px; }
#textSize { font-size:17px; min-height:48px; padding:8px 12px; white-space:nowrap; border:1px solid #64745d; }
.tab { font-size:20px; min-height:56px; }
.cover .badge { font-size:18px; padding:8px 14px; background:#24432deF; }
.card h3 { font-size:24px; }
.card p { -webkit-line-clamp:unset; }
.moment-open { color:var(--green)!important; font-weight:600; }
.mini-moment h3 { font-size:20px; }
.mini-moment .badge { font-size:16px; }
.back { font-size:19px; min-height:56px; color:var(--green); font-weight:600; }
.section-head a { font-size:18px; min-height:56px; }
.post-meta strong { font-size:20px; }
.share-family { display:flex; gap:10px; align-items:center; margin-bottom:25px; font-size:18px; width:100%; justify-content:center; border-color:#74806b; }
.watch-controls { display:flex; gap:12px; padding:16px 0 24px; }
.watch-controls button { flex:1; font-size:22px; min-height:64px; }
.player-actions button { font-size:19px; min-height:60px; flex:1; }
.player-actions .primary { flex:1; }
#toast { font-size:19px; line-height:1.7; }
.error,[role=alert] { font-size:18px; font-weight:600; }
#momentDialog h2 { font-size:25px; }
.icon-button { font-size:18px; min-width:60px; padding:8px 10px; border:1px solid #74806b; border-radius:10px; }
.capture-options,#saveOptions { margin-top:16px; border:1px solid var(--line); border-radius:12px; padding:0 12px; }
summary { font-size:18px; padding:12px 0; min-height:56px; cursor:pointer; font-weight:600; }
.adjust { padding:0 0 12px; gap:8px; }
.adjust button { font-size:17px; min-height:52px; padding:8px; }
#captureTime { font-size:18px; }
#captureHint { font-size:19px; line-height:1.8; }
.checkbox-label { font-size:18px; font-weight:400; padding-bottom:12px; }
.checkbox-label input { min-width:28px; width:28px; height:28px; flex-basis:28px; }
#momentForm>.primary { font-size:22px; min-height:64px; }
footer a { min-height:48px; display:flex; align-items:center; font-size:16px; }
footer { align-items:center; flex-wrap:wrap; }
body[data-text=large] { --reading-size:24px; }
[data-text=large] input,[data-text=large] textarea { font-size:24px; }
[data-text=large] label,[data-text=large] .post-meta strong { font-size:23px; }
@media(max-width:600px) {
  body { padding-bottom:calc(92px + var(--safe-bottom)); }
  header { padding:10px 14px; gap:8px; }
  .brand { font-size:20px; gap:7px; }
  .brand-icon { width:29px; height:29px; flex-shrink:0; }
  main { padding:20px 16px 35px; }
  .topline { margin-bottom:22px; }
  .tabs { display:none; }
  h1 { font-size:30px; }
  h2 { font-size:25px; }
  .grid,.moment-rail { display:grid; grid-template-columns:1fr; overflow:visible; margin:0; padding:0; gap:24px; }
  .moment-rail .card { width:100%; }
  .card { padding:10px 10px 18px; }
  .card h3,.moment-card h3 { font-size:24px; }
  .card p,.moment-card p { font-size:var(--reading-size); display:block; }
  .count,.eyebrow { font-size:17px; }
  .empty h3 { font-size:24px; }
  .empty p { font-size:20px; }
  .section-head { align-items:start; }
  .section-head a { font-size:17px; }
  #mobileNav { padding:8px 12px calc(8px + var(--safe-bottom)); }
  #mobileNav a { min-height:65px; font-size:19px; gap:1px; }
  #mobileNav svg { width:24px; height:24px; }
  .watch-controls { order:1; margin:0; padding:16px 0 18px; }
  .watch-controls button { min-height:64px; font-size:22px; }
  .player-wrap { margin:0 -16px; }
  .player-actions { gap:10px; padding:10px 12px calc(10px + var(--safe-bottom)); }
  .player-actions button,.player-actions .primary { flex:1; font-size:19px; min-height:62px; flex-direction:row; padding:10px 6px; gap:5px; border:1px solid #52674c; }
  .player-actions svg { width:22px; height:22px; flex-shrink:0; }
  .intro { padding-top:12px; }
  .intro p,.post-body { font-size:var(--reading-size); }
  .side h2 { font-size:24px; }
  .mini-moment { grid-template-columns:95px minmax(0,1fr); }
  .mini-moment h3 { font-size:20px; display:block; }
  .mini-moment p { font-size:17px; }
  .mini-moment .cover { height:82px; }
  .form-row { flex-direction:column; align-items:stretch; }
  .form-row label { max-width:none; }
  .form-row .primary { width:100%; min-height:60px; font-size:21px; }
  #commentForm { padding:1px 13px 16px; }
  .post-meta { flex-wrap:wrap; font-size:16px; }
  .post-meta strong { font-size:21px; }
  dialog { padding:12px 16px calc(20px + var(--safe-bottom)); }
  .dialog-top { position:sticky; top:-12px; z-index:2; background:var(--bg); padding:10px 0; align-items:start; }
  #momentDialog h2 { font-size:24px; line-height:1.5; }
  #capturePreview img { max-height:30svh; }
  #captureHint { font-size:19px; }
  dialog label { font-size:20px; }
  #momentForm>.primary { font-size:22px; min-height:64px; }
  #toast { bottom:calc(105px + var(--safe-bottom)); font-size:19px; }
  [data-text=large] #mobileNav a { font-size:22px; }
  [data-text=large] .card h3 { font-size:27px; }
  [data-text=large] .player-actions button { font-size:21px; }
  footer { font-size:16px; justify-content:center; gap:8px; }
}
@media(max-width:360px) {
 .brand { font-size:18px; } #textSize { font-size:16px; padding:7px 9px; }
 .player-actions svg { display:none; }
 .player-actions button,.player-actions .primary { font-size:19px; }
 .adjust button { font-size:16px; }
}