/* Visual language from the user's supplied reference: quiet gray canvas, white
   inset surfaces, fine light edges, generous radii, crisp icons, restrained cyan. */
:root{--paper:#f1f2f3;--white:#fff;--ink:#171a1c;--muted:#555d61;--soft:#e7e9eb;--line:#e3e5e7;--accent:#18b9d6;--ease:cubic-bezier(.2,.75,.25,1)}
body{background:#f1f2f3;color:#171a1c}
.topbar{max-width:1440px}
.hero{background:#f1f2f3}
.hero-photo{border-radius:0}
.hero-enter span{width:46px;height:46px;color:#fff;background:linear-gradient(145deg,#49d5ef,#10aeda);border:1px solid rgba(255,255,255,.88);box-shadow:0 8px 20px rgba(30,181,211,.22)}
.hero-enter:hover span,.hero-enter:focus-visible span{background:linear-gradient(145deg,#32c9e7,#09a6d2);box-shadow:0 10px 25px rgba(30,181,211,.3);transform:scale(1.04)}
.hero-tree .branch{stroke:rgba(42,57,50,.76)}
.hero-tree .leaf{fill:rgba(255,255,255,.56);stroke:rgba(255,255,255,.86)}
.home-after{border-color:#e2e4e6}
.home-link,.quiet-link{color:#555d61}
.pill-button{background:#fff;border:1px solid rgba(255,255,255,.98);border-radius:18px;box-shadow:0 3px 12px rgba(31,43,49,.035);padding-inline:20px}
.pill-button:hover,.pill-button:focus-visible{background:rgba(255,255,255,.9);box-shadow:0 9px 22px rgba(31,43,49,.09),inset 0 1px rgba(255,255,255,.95)}
.pill-button.dark{background:linear-gradient(145deg,#40d1eb,#0ba9d5);border-color:#31c5e2;color:#fff;box-shadow:0 6px 16px rgba(31,181,211,.18)}
.pill-button.dark:hover{background:linear-gradient(145deg,#32c6e4,#079fc9)}
.tree-tools .pill-button{border-radius:999px}
.tree-stage{background:#f5f6f7;border:1px solid rgba(255,255,255,.94);border-radius:32px;box-shadow:inset 0 1px 0 #fff}
.tree-zoom button{background:#fff;border:1px solid #fff;box-shadow:0 4px 12px rgba(30,42,47,.06)}
.tree-person{border-radius:22px}
.tree-person:hover,.tree-person:focus-visible,.tree-person.selected{background:rgba(255,255,255,.86);border-color:#fff;box-shadow:0 8px 22px rgba(31,43,49,.11),inset 0 1px #fff}
.tree-person.is-me:before{background:#14b5d3;box-shadow:0 0 0 3px rgba(20,181,211,.12)}
.tree-preview{background:rgba(255,255,255,.9);border:1px solid #fff;border-radius:26px;box-shadow:0 16px 42px rgba(31,43,49,.13)}
.preview-actions button{border-radius:15px;background:#f3f4f5}
.preview-actions button:first-child{background:linear-gradient(145deg,#40d1eb,#0ba9d5);color:#fff}
.person-hero{border-radius:0 0 34px 34px}
.person-hero .person-relationship{border:1px solid rgba(255,255,255,.56);background:rgba(255,255,255,.2)}
.person-content{background:transparent}
.story-columns{border-color:#e1e3e5}
.disclosure{border-color:#e1e3e5}
.memory-tabs{border-color:#e1e3e5}
.memory-tabs button[aria-pressed=true]{box-shadow:0 2px #19b7d5;color:#222}
.memory-media{border-radius:24px;background:#e5e8e9;border:1px solid rgba(255,255,255,.95)}
.audio-visual{border-radius:28px;background:linear-gradient(140deg,#e8f8fb,#f8f9f9 72%);border:1px solid #fff}
.audio-wave{background:#23b8d4}
.event-row{border-color:#e1e3e5}
.map-hero{border-radius:32px;border:1px solid #fff;box-shadow:inset 0 1px #fff}
.map-land{fill:#d9dfe0;stroke:#f1f2f3}
.map-pin{fill:#21b8d5}
.map-place{border-color:#e0e3e5}
.search-field{border-color:#d5dade}
.search-field{gap:10px;padding-inline:14px}
.search-field input{min-width:0;padding-inline:6px}
.result-person{border-color:#e1e3e5}
.result-person:hover{padding-left:9px;background:rgba(255,255,255,.44)}
.admin-row{border-color:#e1e3e5}
.admin-tabs button[aria-current=page]{box-shadow:0 2px #20b7d4}
.sheet-dialog{background:rgba(249,250,250,.97);border-radius:30px;box-shadow:0 30px 90px rgba(23,34,39,.19);border:1px solid rgba(255,255,255,.95)}
.sheet-dialog::backdrop{background:rgba(27,35,38,.3)}
.identity-choice:hover{background:linear-gradient(90deg,#fff,transparent)}
.identity-choice small{color:#555d61}
.login-form input,.upload-form input,.upload-form textarea,.upload-form select,.admin-form input,.admin-form select{background:#fff;border:1px solid #e2e5e7;border-radius:14px}
.relation-path{border-radius:18px;background:#f0f2f3}
.toast{background:rgba(24,32,35,.88)}
@media(max-width:680px){
  .mobile-nav{left:5%;right:5%;bottom:calc(10px + env(safe-area-inset-bottom));border:1px solid rgba(255,255,255,.96);border-radius:26px;background:rgba(255,255,255,.84);padding:7px 8px calc(7px + env(safe-area-inset-bottom));box-shadow:0 12px 32px rgba(31,43,49,.1),inset 0 1px #fff}
  .mobile-nav button{border-radius:19px;min-height:48px;transition:background .22s var(--ease),color .22s var(--ease)}
  .mobile-nav button[aria-current=page]{background:rgba(255,255,255,.94);color:#16191b;box-shadow:0 3px 12px rgba(28,41,47,.1),inset 0 1px #fff}
.mobile-nav button[aria-current=page] span{color:#12b2d2}
  .mobile-nav button svg{width:23px;height:23px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .tree-stage{border-radius:26px;margin-inline:-2%;}
  .person-hero{border-radius:0 0 28px 28px}
  .memory-media{border-radius:20px}
  .map-hero{border-radius:26px}
  .sheet-dialog{background:rgba(250,251,251,.98);border:1px solid #fff}
}
@media(prefers-reduced-transparency:reduce){.mobile-nav,.tree-preview,.sheet-dialog{background:#fff!important}}
.photo-mark-tools{display:grid;gap:10px;padding:18px;border:1px solid #fff;border-radius:22px;background:rgba(255,255,255,.48)}
.photo-mark img[hidden]{display:none}
.photo-mark-tools label{display:grid;gap:6px}
.photo-mark-tools select,.unknown-person-row input{width:100%;padding:11px 13px;border:1px solid #e2e5e7;border-radius:14px;background:#fff}
.photo-mark-keyboard-controls{display:grid;gap:10px;padding:14px;border:1px solid #dfe4e5;border-radius:16px;background:rgba(255,255,255,.62)}
.photo-mark-keyboard-controls p{margin:0;line-height:1.6;color:#485357;font-size:14px}
.photo-mark-keyboard-buttons{display:flex;flex-wrap:wrap;gap:8px}
.photo-mark-keyboard-buttons button{min-height:42px;padding:8px 12px;border:1px solid #d5dcde;border-radius:999px;background:#fff;color:#202629}
.photo-mark-keyboard-buttons button:disabled{opacity:.55;cursor:not-allowed}
.unknown-person-row{display:flex;align-items:center;gap:10px}
.unknown-person-row .pill-button{flex:0 0 auto}
.photo-mark{position:relative;min-height:170px;max-height:380px;display:grid;place-items:center;overflow:hidden;border:1px dashed #cbd2d4;border-radius:18px;background:#eef1f2;touch-action:none;user-select:none}
.photo-mark img{display:block;width:100%;height:auto;max-height:380px;object-fit:contain;pointer-events:none}
#person-boxes{position:absolute;inset:0;pointer-events:none}
.photo-mark>span{position:absolute;inset:auto 15px;text-align:center;color:#555f63;font-size:14px;pointer-events:none}
.person-box{position:absolute;display:flex;align-items:flex-start;padding:3px 5px;border:2px solid #18b9d6;border-radius:8px;background:rgba(24,185,214,.12);color:#123e48;font-size:11px;overflow:hidden}
.person-box.drawing{background:rgba(24,185,214,.16)}
.hero-photo-empty{background:linear-gradient(118deg,#eef0f1 0%,#e4e8e9 68%,#eef0f1 100%);}
.hero-photo-empty:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(241,242,243,.9),rgba(241,242,243,.18) 65%,rgba(241,242,243,.05)),linear-gradient(0deg,var(--paper),transparent 14%,transparent 90%,var(--paper));}
.hero-photo-empty p{position:absolute;z-index:1;right:9%;bottom:17%;color:#555f63;font-size:13px;letter-spacing:.04em}
.person-hero-empty{background:linear-gradient(135deg,#eceff0,#dfe5e6 70%,#eef0f1)}
.person-hero-empty:after{background:linear-gradient(0deg,rgba(35,43,45,.26),rgba(35,43,45,.02) 48%,transparent)!important}
.person-photo-empty{position:absolute;inset:0;display:grid;place-items:center;color:#555f63;font-size:14px;letter-spacing:.04em}
.map-empty{display:grid;place-items:center;text-align:center;padding:35px;color:#555f63;background:linear-gradient(145deg,#e9edef,#f4f5f5 68%,#e5e9ea)}
.map-empty p{font-size:17px;line-height:1.9}

/* Refined Liquid Glass controls: the material forms around interaction. */
.skip-link{position:fixed;z-index:50;top:10px;left:10px;padding:10px 16px;border-radius:999px;background:#fff;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.topbar{width:min(calc(100% - 40px),1400px);height:64px;min-height:64px;margin:8px auto;padding:0 clamp(16px,3.5vw,48px);border:1px solid rgba(255,255,255,.88);border-radius:999px;background:rgba(248,249,249,.88);backdrop-filter:blur(24px) saturate(1.15);-webkit-backdrop-filter:blur(24px) saturate(1.15);box-shadow:inset 0 1px rgba(255,255,255,.96),0 8px 28px rgba(35,51,59,.055)}
:where(button,a,input,select,textarea):focus-visible{outline:2px solid rgba(100,117,109,.82)!important;outline-offset:2px!important;box-shadow:0 0 0 4px rgba(255,255,255,.94),inset 0 1px rgba(255,255,255,.96),0 7px 20px rgba(31,43,49,.09)!important;border-radius:999px}
.manage-button{min-height:42px;padding:8px 17px;border-radius:999px;background:rgba(255,255,255,0);border:1px solid transparent;transition:background .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease),color .22s var(--ease),transform .22s var(--ease)}
.manage-button:hover,.manage-button:focus-visible,.manage-button:active{background:rgba(255,255,255,.56);border-color:rgba(255,255,255,.88);backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);box-shadow:inset 0 1px rgba(255,255,255,.96),0 7px 20px rgba(31,43,49,.09);color:var(--ink)}
.manage-button:active{transform:scale(.97)}
.who-button{min-height:42px;border-radius:999px;transition:background .22s var(--ease),box-shadow .22s var(--ease),color .22s var(--ease)}
.who-button:hover,.who-button:focus-visible,.who-button:active{background:rgba(255,255,255,.56);backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);box-shadow:inset 0 1px rgba(255,255,255,.96),0 7px 20px rgba(31,43,49,.09);color:var(--ink)}
.main-nav button{flex:0 0 auto;white-space:nowrap;border-radius:999px;padding:9px 14px;color:#3e474b;font-weight:550;text-shadow:0 1px rgba(255,255,255,.55);transition:background .22s var(--ease),box-shadow .22s var(--ease),color .22s var(--ease)}
.main-nav button[aria-current=page]{background:rgba(255,255,255,.48)}
.main-nav button[aria-current=page]{color:#171a1c;font-weight:650}
.main-nav button[aria-current=page]:after{display:none}
.main-nav button:hover,.main-nav button:focus-visible,.main-nav button:active{background:rgba(255,255,255,.68);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:inset 0 1px rgba(255,255,255,.92),0 6px 18px rgba(31,43,49,.08);color:var(--ink)}
.menu-button{width:46px;height:42px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);transition:background .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.menu-button:hover,.menu-button:focus-visible,.menu-button[aria-expanded=true]{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.92);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:inset 0 1px rgba(255,255,255,.98),0 8px 24px rgba(31,43,49,.1)}
.menu-button:active{transform:scale(.96)}
.hero-enter{border-radius:999px;min-height:50px;padding:6px 18px 6px 7px;transition:background .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.hero-enter:hover,.hero-enter:focus-visible,.hero-enter:active{background:rgba(255,255,255,.54);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:inset 0 1px rgba(255,255,255,.94),0 7px 20px rgba(31,43,49,.08)}
.hero-enter:active{transform:scale(.98)}
.tree-tools .quiet{min-height:44px;padding-inline:16px;border-radius:999px;transition:background .22s var(--ease),box-shadow .22s var(--ease)}
.tree-tools .quiet:hover,.tree-tools .quiet:focus-visible{background:rgba(255,255,255,.66);backdrop-filter:blur(16px);box-shadow:inset 0 1px rgba(255,255,255,.96),0 6px 18px rgba(31,43,49,.08)}
.tree-empty-note{position:absolute;top:61%;left:50%;transform:translate(-50%,-50%);max-width:min(460px,82%);text-align:center;padding:17px 24px;border-radius:24px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.82);backdrop-filter:blur(14px);color:var(--ink)}
.tree-empty-note span{display:block;font-size:18px;font-weight:550}
.tree-empty-note small{display:block;margin-top:4px;color:#687176;font-size:14px}
.tree-caption{max-width:calc(100% - 140px)}
.person-hero-empty .person-hero-copy{color:#171a1c}
.person-hero-empty .person-hero-copy .eyebrow,.person-hero-empty .person-years{color:#4c565a}
.person-hero-empty .person-hero-copy h1{text-shadow:none}
.admin-empty{max-width:680px;padding:24px 0;color:#555f63;line-height:1.8}
.timeline-empty{padding:clamp(26px,6vw,70px) 0;max-width:760px}
.timeline-empty h2{font-size:clamp(34px,5vw,58px);line-height:1.18;font-weight:500;letter-spacing:-.045em;margin:18px 0}
.timeline-empty>p:not(.eyebrow){max-width:540px;color:#555f63;font-size:17px}
.memory-empty-stage{display:grid;grid-template-columns:92px minmax(0,560px);align-items:center;gap:28px;padding:clamp(30px,7vw,78px) 0}
.memory-empty-art{width:78px;height:78px;display:grid;place-items:center;border-radius:50%;background:rgba(24,185,214,.12);color:#139eb8}
.memory-empty-art svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.memory-empty-stage h2{font-size:clamp(32px,5vw,54px);line-height:1.15;letter-spacing:-.04em;margin:8px 0 14px;font-weight:500}
.memory-empty-stage p:not(.eyebrow){font-size:17px;color:#555f63;max-width:540px}
.memory-empty-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px}
.map-empty{position:relative;min-height:420px;overflow:hidden}
.map-empty svg{width:min(86%,780px);max-height:78%;opacity:.56}
.map-empty-copy{position:absolute;inset:auto 8% 8%;max-width:660px;text-align:left;padding:20px 24px;border-radius:22px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.86);backdrop-filter:blur(14px)}
.map-empty-copy p{margin:4px 0;font-size:17px!important}
.map-empty-copy small{color:#555f63}
.admin-tabs{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none}
.admin-tabs::-webkit-scrollbar{display:none}
.admin-tabs button{white-space:nowrap;border-radius:999px;padding:9px 13px}
.admin-tabs button[aria-current=page]{box-shadow:inset 0 -2px #20b7d4;color:var(--ink)}

/* Keep the existing selected interactions; make the selected label easier to read. */
.main-nav button[aria-current=page],
.mobile-nav button[aria-current=page],
.admin-tabs button[aria-current=page],
.memory-tabs button[aria-pressed=true]{
  color:#111315;
  font-weight:650;
}

/* Readable form labels, helper text, and controls for older family members. */
.sheet-dialog .lead-small,
.sheet-dialog .quiet-caption,
.upload-form small{color:#555d59}
.upload-form label{font-size:16px;line-height:1.5;font-weight:550}
.upload-form input,
.upload-form textarea,
.upload-form select{font-size:17px;min-height:52px;line-height:1.45}
.upload-form textarea{min-height:112px}
.upload-form input::placeholder,
.upload-form textarea::placeholder{color:#686f6b;opacity:1}
.upload-form small,.sheet-dialog .quiet-caption{font-size:15px;line-height:1.55}
.admin-row button{min-height:42px;padding:7px 14px;border-radius:999px;transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.admin-row button:hover,.admin-row button:focus-visible{background:rgba(255,255,255,.66);box-shadow:inset 0 1px rgba(255,255,255,.96),0 6px 18px rgba(31,43,49,.08)}
.result-person:focus-visible{border-radius:16px}
.hero-photo-empty p{display:none}
@media(max-width:680px){
 .topbar{width:calc(100% - 20px);height:54px;min-height:54px;margin:6px auto;padding:0 4%;border-radius:999px;background:rgba(255,255,255,.52);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);box-shadow:inset 0 1px rgba(255,255,255,.94),0 6px 20px rgba(35,51,59,.06)}
 .manage-button{padding-inline:10px;min-height:42px}
 .main-nav[style*="display: flex"]{border-radius:26px;background:rgba(241,244,246,.7)!important;backdrop-filter:blur(24px) saturate(1.4)!important;-webkit-backdrop-filter:blur(24px) saturate(1.4)!important}
 .main-nav[style*="display: flex"] button{border-radius:999px}
 .hero-tree{width:min(94vw,450px);height:56%;top:39%;right:0;opacity:.75}
 .tree-empty-note{top:20%;padding:14px 16px;max-width:78%}
 .tree-empty-note span{font-size:16px}
 .tree-empty-note small{font-size:13px}
 .memory-empty-stage{grid-template-columns:1fr;gap:18px;padding:34px 0}
 .memory-empty-art{width:64px;height:64px}
 .map-empty{min-height:430px;padding:18px}
 .map-empty-copy{inset:auto 12px 16px;padding:16px;border-radius:18px}
 .timeline-empty h2{font-size:36px}
 .admin-tabs{gap:8px}
 .admin-tabs button{padding-inline:12px}
}

/* At tablet widths, keep the full navigation in a compact glass menu. */
@media(min-width:681px) and (max-width:1280px){
 .topbar{gap:clamp(10px,2.5vw,24px);padding-inline:clamp(16px,3vw,32px)}
 .main-nav{display:none}
 .main-nav.is-open{display:flex;position:absolute;top:calc(100% + 8px);right:4%;z-index:8;margin:0;padding:10px 12px;flex-direction:column;align-items:stretch;gap:4px;width:min(300px,90vw);border:1px solid rgba(255,255,255,.9);border-radius:26px;background:rgba(241,244,246,.92);backdrop-filter:blur(24px) saturate(1.35);-webkit-backdrop-filter:blur(24px) saturate(1.35);box-shadow:0 16px 42px rgba(37,57,72,.14),inset 0 1px rgba(255,255,255,.95)}
 .main-nav.is-open button{width:100%;min-height:48px;text-align:left;padding:10px 14px;border-radius:999px}
 .menu-button{display:grid;place-items:center;flex:0 0 46px}
}

/* Compact, consistent filter capsules; retain native select semantics. */
.admin-tools select{appearance:none;-webkit-appearance:none;min-width:0;max-width:100%;min-height:46px;padding:8px 34px 8px 15px;border:1px solid rgba(255,255,255,.96);border-radius:999px;background-color:rgba(255,255,255,.74);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7 5 5 5-5' fill='none' stroke='%23555d61' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px;box-shadow:0 3px 12px rgba(31,43,49,.035);line-height:1.3}
.admin-tools select:hover,.admin-tools select:focus-visible{background-color:#fff}
.search-field:focus-within{border-color:#64756d;box-shadow:inset 0 -2px #64756d}
#global-search:focus-visible{outline:2px solid #64756d!important;outline-offset:4px!important;border-radius:10px!important;box-shadow:0 0 0 4px rgba(255,255,255,.94)!important}

@media(max-width:680px){
 .admin-primary{gap:8px;flex-wrap:wrap;max-width:100%}
 .admin-navitem{min-width:0;flex:0 0 auto}
 .admin-primary button{min-height:44px}
 .admin-tools select{flex:0 1 auto;min-width:72px}
}
@media(max-width:380px){.brand{font-size:13px}.manage-button{font-size:11px;padding-inline:8px}}
@media(prefers-reduced-transparency:reduce){.topbar,.manage-button:hover,.who-button:hover,.main-nav button:hover,.menu-button:hover,.hero-enter:hover,.tree-empty-note,.map-empty-copy{backdrop-filter:none!important;background:#fff}}

/* Elder home keeps the family navigation in a calm, readable two-row glass panel. */
body.home-view.elder-mode .topbar{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:8px;width:min(calc(100% - 32px),900px);height:auto;min-height:0;margin:10px auto 0;padding:14px clamp(18px,4vw,34px) 12px;border-radius:30px;background:rgba(248,249,248,.86);border-color:rgba(255,255,255,.92);box-shadow:inset 0 1px rgba(255,255,255,.96),0 10px 30px rgba(34,47,53,.1);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2)}
body.home-view.elder-mode .brand{justify-self:start;padding:2px 0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(25px,3.2vw,31px);font-weight:750;letter-spacing:.01em;color:#22292b;-webkit-text-stroke:.25px currentColor}
body.home-view.elder-mode .elder-nav{grid-row:2;width:100%;min-width:0;margin:0;display:flex;justify-content:space-between;align-items:center;gap:clamp(5px,1.7vw,20px);overflow-x:auto;scrollbar-width:none}
body.home-view.elder-mode .elder-nav::-webkit-scrollbar{display:none}
body.home-view.elder-mode .elder-nav button{flex:0 0 auto;min-height:52px;padding:8px clamp(4px,1.2vw,12px);border-radius:14px;color:#485256;font-size:clamp(18px,2.45vw,24px);font-weight:750;letter-spacing:.01em;-webkit-text-stroke:.2px currentColor}
body.home-view.elder-mode .elder-nav button:hover,body.home-view.elder-mode .elder-nav button:focus-visible{background:rgba(255,255,255,.82);color:#202729;outline-offset:1px}
body.home-view.elder-mode .hero h1{font-size:clamp(58px,9vw,108px);font-weight:750;letter-spacing:0}
body.home-view.elder-mode .hero-subtitle{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(25px,3.2vw,36px);font-weight:750;-webkit-text-stroke:.25px currentColor}
body.home-view.elder-mode .hero-enter{min-height:76px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(23px,2.9vw,32px);font-weight:750;-webkit-text-stroke:.2px currentColor}
body.home-view.elder-mode .hero-footnote{font-size:16px;font-weight:750;letter-spacing:.04em;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.78),0 0 12px rgba(0,0,0,.46);-webkit-text-stroke:.2px currentColor}
body.home-view.elder-mode .home-after{font-size:20px;font-weight:700}
body.home-view.elder-mode .home-after h2{font-size:clamp(32px,4vw,46px);font-weight:750}
body.home-view.elder-mode .home-link{font-size:20px;font-weight:700}
body.home-view.elder-mode .elder-exit-bottom{font-weight:700}
.elder-mode .elder-exit-bottom:focus-visible{outline:0!important;border-color:rgba(255,255,255,.98);box-shadow:0 0 0 3px rgba(100,117,109,.68),0 0 0 6px rgba(255,255,255,.96),0 10px 26px rgba(35,48,53,.16)!important}
@media(max-width:680px){
 body.home-view.elder-mode .topbar{width:calc(100% - 20px);margin-top:6px;padding:12px 16px 8px;border-radius:26px;gap:4px}
 body.home-view.elder-mode .brand{font-size:27px}
 body.home-view.elder-mode .elder-nav{gap:2px}
 body.home-view.elder-mode .elder-nav button{min-height:48px;padding:6px 5px;font-size:clamp(18px,4.6vw,20px);letter-spacing:0}
 body.home-view.elder-mode .hero h1{font-size:clamp(50px,14vw,76px)}
 body.home-view.elder-mode .hero-subtitle{font-size:clamp(23px,6.3vw,29px)}
 body.home-view.elder-mode .hero-enter{min-height:82px;font-size:clamp(24px,6.5vw,31px)}
 body.home-view.elder-mode .hero-footnote{bottom:calc(104px + env(safe-area-inset-bottom));font-size:16px}
 body.home-view.elder-mode .elder-exit-bottom{min-width:220px;min-height:56px;font-size:19px}
}
@media(max-width:680px){.main-nav.is-open{display:flex;position:absolute;top:58px;right:5%;margin:0;padding:10px 12px;flex-direction:column;align-items:stretch;gap:4px;width:min(280px,90vw);border:1px solid rgba(255,255,255,.88);border-radius:26px;background:rgba(241,244,246,.7);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 16px 42px rgba(37,57,72,.14),inset 0 1px rgba(255,255,255,.9)}.main-nav.is-open button{width:100%;min-height:44px;text-align:left;padding:10px 12px;border-radius:999px}}

/* Home follows the approved continuous landscape reference. */
body.home-view{background:#f1f2f3}
.home-view .topbar{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:min(calc(100% - 40px),1400px);margin:0;z-index:8;background:rgba(248,249,249,.88);border-color:rgba(255,255,255,.88);box-shadow:inset 0 1px rgba(255,255,255,.96),0 8px 28px rgba(25,35,40,.055);backdrop-filter:blur(24px) saturate(1.15);-webkit-backdrop-filter:blur(24px) saturate(1.15)}
.home-view .hero{height:100svh;min-height:640px;max-height:none;margin:0;align-items:center;background:#e9e8e2}
.home-view .hero-photo{inset:0;mask-image:none;-webkit-mask-image:none}
.home-view .hero-photo img{object-position:center 57%;filter:saturate(.88)}
.home-view .hero-photo:after{background:linear-gradient(90deg,rgba(248,247,242,.97) 0%,rgba(248,247,242,.86) 24%,rgba(248,247,242,.45) 46%,transparent 69%),linear-gradient(0deg,rgba(16,22,22,.52),transparent 25%,transparent 84%,rgba(18,26,30,.08))}
.home-view .hero-copy{width:min(55%,680px);margin-left:max(8%,calc((100% - var(--width))/2));padding:60px 0 0;}
.home-view .hero h1{font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;font-size:clamp(56px,8vw,104px);font-weight:500;letter-spacing:.02em;line-height:1.05;margin:0 0 18px;color:#171a1c}
.home-view .hero-subtitle{font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;font-size:clamp(20px,2.35vw,30px);letter-spacing:.03em;color:#333b3c;max-width:560px}
.home-view .hero-enter{margin-top:34px;gap:18px;min-height:54px;padding:6px 18px 6px 22px;color:#202527;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.93);box-shadow:0 5px 18px rgba(25,35,40,.08);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);font-family:"Songti SC","STSong",serif;font-size:17px}
.home-view .hero-enter span{width:auto;height:auto;background:none;border:0;box-shadow:none;font:inherit}
.home-view .hero-enter:hover,.home-view .hero-enter:focus-visible{background:rgba(255,255,255,.96);box-shadow:0 9px 26px rgba(25,35,40,.14),inset 0 1px #fff}
.home-view .hero-footnote{left:5%;right:5%;bottom:26px;display:flex;justify-content:space-between;color:rgba(255,255,255,.88);font-size:14px;text-shadow:0 1px 8px rgba(0,0,0,.35);letter-spacing:.08em}
.home-view .home-after{position:relative;z-index:1}
.admin-section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 18px}
.admin-section-heading .section-title{margin:0}
.family-admin-row{align-items:center}
.relation-name-list{display:grid;gap:14px}
.relation-name-row{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px}
.relation-name-row label{display:grid;gap:6px}
.relation-plus{display:grid;place-items:center;width:42px;height:42px;border:1px solid #fff;border-radius:50%;background:linear-gradient(145deg,#39cee7,#0ba9d5);color:#fff;font-size:25px;box-shadow:0 5px 16px rgba(24,185,214,.18)}
.relation-add-person{justify-self:start;margin-left:58px}
.relation-editor [hidden]{display:none!important}
.memory-photo-pending{display:grid;place-items:center;min-height:230px;border-radius:24px;background:linear-gradient(145deg,#eceff0,#f8f9f9);color:#555f63;font-size:16px;letter-spacing:.08em}
@media(max-width:680px){
 .home-view .topbar{top:6px;width:calc(100% - 20px)}
 .home-view .hero{height:100svh;min-height:600px}
 .home-view .hero-photo img{object-position:57% center}
 .home-view .hero-photo:after{background:linear-gradient(90deg,rgba(248,247,242,.92),rgba(248,247,242,.65) 45%,rgba(248,247,242,.04) 100%),linear-gradient(0deg,rgba(12,18,18,.55),transparent 30%,transparent 85%,rgba(16,22,24,.08))}
 .home-view .hero-copy{width:82%;margin-left:7%;padding-top:36px}
 .home-view .hero h1{font-size:clamp(48px,13vw,72px)}
 .home-view .hero-subtitle{font-size:clamp(19px,5.2vw,25px)}
 .home-view .hero-footnote{left:7%;right:7%;bottom:calc(92px + env(safe-area-inset-bottom));font-size:12px}
 .admin-section-heading{align-items:flex-start;flex-direction:column}
 .relation-name-row{grid-template-columns:38px minmax(0,1fr);gap:10px}
 .relation-plus{width:36px;height:36px}
 .relation-add-person{margin-left:48px}
}
.relation-editor{width:min(100%,560px);margin-inline:auto}
.relation-name-list{width:min(100%,520px);margin-inline:auto}
.relation-name-row{align-items:center}
.relation-plus{align-self:center;margin-bottom:0}
.relation-add-person{margin-left:58px}
@media(max-width:680px){.relation-name-list{width:100%}.relation-name-row{align-items:center}.relation-plus{margin-bottom:0}}
.memory-empty-art{width:auto;min-width:92px;height:92px;padding:0 12px;border-radius:50%;font-size:14px;letter-spacing:.06em;white-space:nowrap}
.timeline-media-pending{width:100%;height:clamp(220px,38vw,470px);margin:0 0 34px;border-radius:26px;background:linear-gradient(145deg,#e9edef,#f7f8f8 62%,#e3e8e9);display:grid;place-items:center;color:#555f63;font-size:16px;letter-spacing:.08em}
.timeline-empty{max-width:none}
@media(max-width:680px){.memory-empty-art{min-width:80px;height:80px}.timeline-media-pending{height:42svh;min-height:230px;border-radius:22px;margin-bottom:26px}}
/* Center the CTA label while keeping its arrow anchored like the supplied reference. */
.home-view .hero-enter{position:relative;width:min(290px,86vw);height:clamp(74px,25.5vw,108px);min-height:0;padding:0 58px;border-radius:999px;display:flex;align-items:center;justify-content:center;text-align:center;margin-top:32px;font-size:clamp(20px,6vw,28px);line-height:1.2}
.home-view .hero-enter .hero-label{position:static;display:block;width:100%;height:auto;margin:0;text-align:center;background:none;border:0;box-shadow:none;color:inherit;font:inherit}
.home-view .hero-enter .hero-arrow{position:absolute;right:clamp(24px,8vw,42px);top:50%;transform:translateY(-50%);display:block;width:auto;height:auto;margin:0;background:none;border:0;box-shadow:none;color:inherit;font-size:1.08em;line-height:1}
@media(max-width:680px){
 .home-view .hero-copy{text-align:left}
 .home-view .hero-subtitle{margin:0}
 .home-view .hero-enter{margin-inline:auto}
}
.memory-empty-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:clamp(30px,6vw,68px) 0}
.memory-empty-art{width:100%;min-width:0;height:clamp(220px,38vw,430px);border-radius:26px;justify-self:stretch}
.memory-empty-stage>div:nth-child(2){max-width:620px}
@media(max-width:680px){.memory-empty-stage{grid-template-columns:minmax(0,1fr);gap:20px;padding:28px 0}.memory-empty-art{height:clamp(220px,52vw,340px);border-radius:22px}}
@media(max-width:680px){
 .home-view .hero-copy{width:100%;margin:0;padding-inline:7%;text-align:left}
 .home-view .hero-enter{margin-inline:auto}
 .timeline-media-pending{height:min(32svh,270px);min-height:210px}
}
@media(max-width:680px){
 .timeline-media-pending{height:min(52svh,440px);min-height:340px}
 .memory-empty-art{height:clamp(250px,31svh,300px)}
}
@media(max-width:680px){
 .family-admin-row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
 .family-admin-row>span{min-width:0;overflow-wrap:anywhere}
 .family-admin-row>button{justify-self:start;white-space:nowrap}
}

/* Fieldsets stay out of the form grid's row sizing; capsules own their geometry. */
.gender-field{display:block;width:100%;min-width:0;margin:0;padding:0;border:0;align-self:end}
.gender-field legend{margin:0 0 7px;padding:0;font-size:16px}
.life-status-field{display:block;width:100%;min-width:0;margin:0;padding:0;border:0;align-self:end}
.life-status-field legend{margin:0 0 7px;padding:0;font-size:16px;line-height:1.4}
.gender-options{display:flex!important;align-items:center;width:100%;height:62px;min-height:62px;padding:5px;gap:6px;box-sizing:border-box}
.upload-form label.gender-option{display:flex!important;align-items:center;justify-content:center;flex:1;gap:0;width:0;height:50px;min-height:50px;margin:0;padding:0;align-self:center}
.gender-option input[type=radio]{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;background:transparent}
.gender-option span{display:flex;align-items:center;justify-content:center;flex:1;height:50px;min-height:50px;margin:0;padding:0 8px;line-height:1.25;text-align:center}
.relation-direction{min-width:0;border:0;margin:0;padding:0}
.relation-direction legend{font-size:16px;margin-bottom:8px}
.relation-choice-group{display:flex;flex-wrap:wrap;gap:8px}
.upload-form .relation-choice-group label{position:relative;display:flex;flex:1;min-width:100px;gap:0;cursor:pointer}
.relation-choice-group input{position:absolute;inset:0;opacity:0;margin:0}
.relation-choice-group span{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:10px 14px;border:1px solid #d5dadb;border-radius:999px;background:rgba(255,255,255,.45);color:#171a1c}
.relation-choice-group input:checked+span{background:#fff;box-shadow:0 4px 16px #20292415;border-color:#9daaad;font-weight:650}
.relation-choice-group input:focus-visible+span{outline:3px solid #687b71;outline-offset:2px}
.relation-titles{display:grid;gap:16px}.relation-preview{margin:0;color:#171a1c;font-weight:600}.relation-preview:empty{display:none}

/* Family graph path emphasis is temporary and stays within confirmed structure. */
.tree-edge{stroke:rgba(105,119,112,.42);stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;fill:none;vector-effect:non-scaling-stroke;transition:stroke .2s ease,stroke-width .2s ease,opacity .2s ease}
.tree-family-edge{stroke:rgba(100,116,108,.5);stroke-width:1.6}
.tree-edge.path-edge-active{stroke:rgba(74,91,82,.72);stroke-width:2}
.tree-edge.path-edge-dimmed{opacity:.2}
.tree-person{transition:opacity .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease}
.tree-person.path-dimmed{opacity:.32}
.tree-person.path-node strong{font-weight:620}
.tree-path-explanation{margin-top:14px;padding-top:12px;border-top:1px solid rgba(115,127,121,.18)}
.relationship-path-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start}
.relationship-path-list li{display:flex;flex-direction:column;position:relative;padding:8px 0 13px 18px;min-height:42px}
.relationship-path-list li:not(:last-child)::before{content:"";position:absolute;left:4px;top:25px;bottom:-3px;width:1px;background:rgba(105,119,112,.38)}
.relationship-path-list li::after{content:"";position:absolute;left:0;top:13px;width:9px;height:9px;border-radius:50%;background:rgba(105,119,112,.58)}
.relationship-path-list li:first-child::after{background:#18b4cf}
.relationship-path-list strong{font-size:15px;color:#202426}
.relationship-path-list small{font-size:13px;color:#58615d}
@media(prefers-reduced-motion:reduce){.tree-edge,.tree-person{transition:none}}

/* Family tree navigation: the canvas moves under the pointer; node typography stays readable. */
.tree-stage{touch-action:none;cursor:grab;overscroll-behavior:contain}
.tree-stage.is-panning{cursor:grabbing}
.tree-stage.is-panning .tree-canvas{transition:none;will-change:transform}
.tree-spouse-edge{stroke:rgba(89,100,92,.5);stroke-dasharray:none}
.tree-person small{font-size:13px}
@media(max-width:680px){.tree-person small{font-size:13px}.tree-person strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){.tree-canvas{transition:none}}
.tree-person .tree-kinship{font-size:13px!important}
.tree-person strong{font-size:19px}
.tree-person small,.tree-person .tree-kinship{font-size:14px!important}
@media(max-width:680px){.tree-person strong{font-size:19px}.tree-person small,.tree-person .tree-kinship{font-size:14px!important}}

@media(max-width:680px){.tree-tools{grid-template-columns:repeat(4,minmax(0,1fr))}.tree-tools .pill-button,.tree-tools .quiet{min-width:0;padding-inline:5px;white-space:nowrap;font-size:12px}.tree-tools .quiet{min-height:44px}}
 .brand .demo-badge{display:inline-flex;align-items:center;margin-left:8px;padding:2px 8px;border:1px solid rgba(100,117,109,.24);border-radius:999px;background:rgba(255,255,255,.6);color:#5a6d64;font:600 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;vertical-align:middle}
/* Elder mode carries the home screen's navigation and typography into every nested page. */
body.elder-mode:not(.home-view) .topbar{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:8px;width:min(calc(100% - 32px),900px);height:auto;min-height:0;margin:10px auto 0;padding:14px clamp(18px,4vw,34px) 12px;border:1px solid rgba(255,255,255,.92);border-radius:30px;background:rgba(248,249,248,.86);box-shadow:inset 0 1px rgba(255,255,255,.96),0 10px 30px rgba(34,47,53,.1);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2)}
body.elder-mode:not(.home-view) .brand{justify-self:start;padding:2px 0;font-size:clamp(25px,3.2vw,31px);font-weight:750;letter-spacing:.01em;color:#22292b}
body.elder-mode:not(.home-view) .elder-nav{grid-row:2;width:100%;min-width:0;margin:0;display:flex;justify-content:space-between;align-items:center;gap:clamp(5px,1.7vw,20px);overflow-x:auto;scrollbar-width:none}
body.elder-mode:not(.home-view) .elder-nav::-webkit-scrollbar{display:none}
body.elder-mode:not(.home-view) .elder-nav button{flex:0 0 auto;min-height:52px;padding:8px clamp(4px,1.2vw,12px);border-radius:14px;color:#485256;font-size:clamp(18px,2.45vw,24px);font-weight:750;letter-spacing:.01em}
body.elder-mode:not(.home-view) .elder-nav button:hover,body.elder-mode:not(.home-view) .elder-nav button:focus-visible{background:rgba(255,255,255,.82);color:#202729}
body.elder-mode:not(.home-view) #app{font-size:20px;line-height:1.7;font-weight:600}
body.elder-mode:not(.home-view) #app .page{padding-top:38px}
body.elder-mode:not(.home-view) #app .page h1{font-size:clamp(40px,6vw,64px);font-weight:750;letter-spacing:-.035em}
body.elder-mode:not(.home-view) #app .page h2,body.elder-mode:not(.home-view) #app .page h3{font-weight:700}
body.elder-mode:not(.home-view) #app .eyebrow{font-size:16px;font-weight:700;letter-spacing:.1em}
body.elder-mode:not(.home-view) #app .page-intro,body.elder-mode:not(.home-view) #app .page p:not(.eyebrow){font-size:19px;font-weight:600;line-height:1.7}
body.elder-mode:not(.home-view) #app .memory-tabs{gap:clamp(18px,4vw,34px)}
body.elder-mode:not(.home-view) #app .memory-tabs button{min-height:60px;font-size:22px;font-weight:700}
body.elder-mode:not(.home-view) #app .pill-button,body.elder-mode:not(.home-view) #app .quiet-link{font-size:19px;font-weight:700}
body.elder-mode:not(.home-view) #app .memory-empty-stage{gap:clamp(24px,5vw,44px);padding-top:32px}
body.elder-mode:not(.home-view) #app .memory-empty-art{width:100%;min-width:0;height:clamp(240px,34vw,380px);padding:24px;border:1px solid rgba(255,255,255,.94);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,243,241,.9));color:#35413c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 12px 30px rgba(43,63,58,.08),inset 0 1px rgba(255,255,255,.98);cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}
body.elder-mode:not(.home-view) #app .memory-empty-art:hover{box-shadow:0 14px 34px rgba(43,63,58,.13),inset 0 1px #fff;transform:translateY(-2px)}
body.elder-mode:not(.home-view) #app .memory-empty-art:focus-visible{outline:3px solid #64756d;outline-offset:4px;box-shadow:0 12px 30px rgba(43,63,58,.1),inset 0 1px #fff}
body.elder-mode:not(.home-view) #app .memory-empty-art span{font-size:48px;line-height:1;font-weight:500;color:#64756d}
body.elder-mode:not(.home-view) #app .memory-empty-art strong{font-size:28px;font-weight:750}
body.elder-mode:not(.home-view) #app .memory-empty-art small{font-size:18px;font-weight:600;color:#59645f}
body.elder-mode:not(.home-view) #app .memory-empty-stage>div:nth-child(2){max-width:760px}
body.elder-mode:not(.home-view) #app .memory-empty-stage h2{font-size:clamp(34px,5vw,48px)}
body.elder-mode:not(.home-view) #app .memory-item h3{font-size:23px;font-weight:700}
body.elder-mode:not(.home-view) #app .memory-item p{font-size:18px;font-weight:600}
body.elder-mode:not(.home-view) #app .timeline-empty h2{font-weight:750}
body.elder-mode:not(.home-view) #app .timeline-empty>p:not(.eyebrow){font-size:20px;font-weight:600}
body.elder-mode:not(.home-view) #app .tree-person strong{font-size:22px;font-weight:750}
body.elder-mode:not(.home-view) #app .tree-person small{font-size:17px;font-weight:650}
body.elder-mode:not(.home-view) #app .family-generation h2,body.elder-mode:not(.home-view) #app .section-title{font-size:30px;font-weight:750}
body.elder-mode:not(.home-view) #app .family-member-list strong{font-size:23px;font-weight:750}
body.elder-mode:not(.home-view) #app .family-member-list small{font-size:18px;font-weight:600}
@media(max-width:680px){
 body.elder-mode:not(.home-view) .topbar{width:calc(100% - 20px);margin-top:6px;padding:12px 16px 8px;border-radius:26px;gap:4px}
 body.elder-mode:not(.home-view) .brand{font-size:27px}
 body.elder-mode:not(.home-view) .elder-nav{gap:2px}
 body.elder-mode:not(.home-view) .elder-nav button{min-height:48px;padding:6px 5px;font-size:clamp(18px,4.6vw,20px)}
 body.elder-mode:not(.home-view) #app{font-size:19px}
 body.elder-mode:not(.home-view) #app .page{padding-top:26px}
 body.elder-mode:not(.home-view) #app .page-header{align-items:flex-start;flex-direction:column;gap:16px;margin-bottom:28px}
 body.elder-mode:not(.home-view) #app .memory-empty-art{height:clamp(230px,60vw,320px);border-radius:24px}
 body.elder-mode:not(.home-view) #app .memory-empty-stage{gap:22px;padding-top:24px}
}

/* One quiet, keyboard-accessible upload surface in both modes. */
body:not(.elder-mode) #app .memory-empty-art{width:100%;min-width:0;height:clamp(240px,34vw,380px);padding:24px;border:1px solid rgba(255,255,255,.94);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,243,241,.9));color:#35413c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 12px 30px rgba(43,63,58,.08),inset 0 1px rgba(255,255,255,.98);cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}
body:not(.elder-mode) #app .memory-empty-art:hover{box-shadow:0 14px 34px rgba(43,63,58,.13),inset 0 1px #fff;transform:translateY(-2px)}
body:not(.elder-mode) #app .memory-empty-art:focus-visible{outline:3px solid #64756d;outline-offset:4px;box-shadow:0 12px 30px rgba(43,63,58,.1),inset 0 1px #fff}
body:not(.elder-mode) #app .memory-empty-art span{font-size:48px;line-height:1;font-weight:500;color:#64756d}
body:not(.elder-mode) #app .memory-empty-art strong{font-size:28px;font-weight:700}
body:not(.elder-mode) #app .memory-empty-art small{font-size:18px;font-weight:550;color:#59645f}
@media(max-width:680px){body:not(.elder-mode) #app .memory-empty-art{height:clamp(230px,60vw,320px);border-radius:24px}}

/* Keep identity selection out of the crowded navigation and immediately within reach on home. */
.home-view #who-button{display:none!important}
.home-view .home-identity-row{position:absolute;z-index:6;top:calc(var(--nav-h) + 1.25rem);left:0;right:0;width:min(var(--width),88%);margin-inline:auto;display:flex;justify-content:flex-start;pointer-events:none}
.home-view .home-who-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 0;border:0;border-radius:0;background:transparent;color:#414a45;font-size:16px;font-weight:650;white-space:nowrap;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;cursor:pointer;pointer-events:auto;transition:color .2s ease}
.home-view .home-who-button:hover{background:transparent;color:#64756d;box-shadow:none;transform:none}
.home-view .home-who-button:focus-visible{outline:3px solid #64756d;outline-offset:3px}
.home-view .main-nav button{color:#3e474b;font-weight:550;text-shadow:0 1px rgba(255,255,255,.55)}
.home-view .main-nav button[aria-current=page]{color:#171a1c;font-weight:650}
.home-view.elder-mode .home-identity-row{display:none}
@media(max-width:680px){.home-view .home-identity-row{top:calc(var(--nav-h) + .875rem);width:86%}.home-view .home-who-button{min-height:46px;padding:9px 15px;font-size:15px}}

/* Let home actions size to their text in ordinary and elder modes. */
body.home-view .hero-enter{width:max-content;max-width:calc(100vw - 40px);height:auto;min-height:54px;padding:8px 20px;gap:14px}
body.home-view .hero-enter .hero-label{width:auto;white-space:nowrap}
body.home-view .hero-enter .hero-arrow{position:static;transform:none;width:auto;height:auto}
body.home-view.elder-mode .hero-enter{min-height:64px;padding:10px 20px}
@media(max-width:680px){body.home-view .hero-enter{margin-top:28px}}

/* Theme control shared by standard navigation, compact menu, and elder navigation. */
.main-nav .theme-toggle,.elder-nav .theme-toggle{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 12px;border:1px solid rgba(255,255,255,.68);border-radius:999px;background:rgba(255,255,255,.38);color:var(--ink);font:inherit;line-height:1;white-space:nowrap}
.theme-toggle .theme-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .icon-sun{display:none}
.theme-toggle[aria-pressed=true] .icon-moon{display:none}
.theme-toggle[aria-pressed=true] .icon-sun{display:block}
.main-nav .theme-toggle-label{display:none}
.main-nav.is-open .theme-toggle{width:100%;justify-content:flex-start;text-align:left}
.main-nav.is-open .theme-toggle-label{display:inline}
.elder-nav .theme-toggle{min-height:48px;padding-inline:12px}
.theme-toggle:hover{background:rgba(255,255,255,.78);box-shadow:0 5px 16px rgba(31,43,49,.08)}
.theme-toggle:active{transform:scale(.97)}

/* Night palette: preserve the same hierarchy, glass surfaces, and calm cyan accents. */
:root[data-theme="dark"]{color-scheme:dark;--paper:#171b1e;--white:#22292d;--ink:#edf1f2;--muted:#b4bec2;--soft:#2a3236;--line:#3a4449;--accent:#5bc9df}
:root[data-theme="dark"] body{background:#171b1e;color:#edf1f2}
:root[data-theme="dark"] .hero,:root[data-theme="dark"] .home-view,:root[data-theme="dark"] body.home-view{background:#171b1e}
:root[data-theme="dark"] .topbar,:root[data-theme="dark"] .home-view .topbar,:root[data-theme="dark"] body.home-view.elder-mode .topbar,:root[data-theme="dark"] body.elder-mode:not(.home-view) .topbar{background:rgba(31,38,42,.94);border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px rgba(255,255,255,.08),0 8px 28px rgba(0,0,0,.2)}
:root[data-theme="dark"] .brand,:root[data-theme="dark"] .home-view .brand,:root[data-theme="dark"] .elder-mode .brand{color:#f1f4f5}
:root[data-theme="dark"] .main-nav button,:root[data-theme="dark"] .elder-nav button,:root[data-theme="dark"] .manage-button,:root[data-theme="dark"] .elder-entry,:root[data-theme="dark"] .who-button{color:#d0d8db}
:root[data-theme="dark"] .main-nav button[aria-current=page],:root[data-theme="dark"] .elder-nav button[aria-current=page]{color:#fff}
:root[data-theme="dark"] .main-nav button:hover,:root[data-theme="dark"] .elder-nav button:hover,:root[data-theme="dark"] .manage-button:hover,:root[data-theme="dark"] .who-button:hover{color:#fff;background:rgba(255,255,255,.12)}
:root[data-theme="dark"] .main-nav.is-open{background:rgba(31,38,42,.98)!important;border-color:#414c51;box-shadow:0 16px 42px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08)}
:root[data-theme="dark"] .main-nav.is-open button{color:#d5dddf}
:root[data-theme="dark"] .main-nav.is-open button{font-weight:600;text-shadow:none}
:root[data-theme="dark"] .main-nav.is-open button:hover,:root[data-theme="dark"] .main-nav.is-open button:focus-visible{color:#fff;background:rgba(255,255,255,.12)}
:root[data-theme="dark"] .main-nav.is-open button[aria-current=page]{color:#fff;background:#354146}
:root[data-theme="dark"] .main-nav.is-open .theme-toggle{color:#edf1f2;background:#2a3438;border-color:#4b595e}
:root[data-theme="dark"] .main-nav.is-open .theme-toggle:hover{background:#364247}
:root[data-theme="dark"] .mobile-nav{background:rgba(30,37,41,.97);border-color:#3a4449;box-shadow:0 -8px 32px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05)}
:root[data-theme="dark"] .mobile-nav button{color:#c1cbce}
:root[data-theme="dark"] .mobile-nav button[aria-current=page]{background:#3a464b;color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.12),0 5px 16px rgba(0,0,0,.22)}
:root[data-theme="dark"] .mobile-nav button[aria-current=page] span{color:#71d2e5}
:root[data-theme="dark"] .menu-button,:root[data-theme="dark"] .main-nav .theme-toggle,:root[data-theme="dark"] .elder-nav .theme-toggle{color:#edf1f2;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
:root[data-theme="dark"] .theme-toggle:hover{background:rgba(255,255,255,.15)}
:root[data-theme="dark"] .hero-photo:after{background:linear-gradient(90deg,rgba(15,19,21,.96) 0%,rgba(15,19,21,.8) 30%,rgba(15,19,21,.34) 62%,transparent 88%),linear-gradient(0deg,#171b1e,transparent 18%,transparent 86%,rgba(15,19,21,.25))}
:root[data-theme="dark"] .home-view .hero-photo:after{background:linear-gradient(90deg,rgba(15,19,21,.96) 0%,rgba(15,19,21,.84) 28%,rgba(15,19,21,.42) 52%,transparent 75%),linear-gradient(0deg,rgba(15,19,21,.72),transparent 28%,transparent 84%,rgba(15,19,21,.28))}
:root[data-theme="dark"] .hero h1,:root[data-theme="dark"] .home-view .hero h1{color:#f0f3f4}
:root[data-theme="dark"] .hero-subtitle,:root[data-theme="dark"] .home-view .hero-subtitle{color:#d2dadd}
:root[data-theme="dark"] .hero-footnote,:root[data-theme="dark"] .home-view .hero-footnote{color:#edf1f2}
:root[data-theme="dark"] .home-after{border-color:#343d41}
:root[data-theme="dark"] .home-link,:root[data-theme="dark"] .quiet-link,:root[data-theme="dark"] .page-intro,:root[data-theme="dark"] .eyebrow,:root[data-theme="dark"] .quiet-caption{color:#b4bec2}
:root[data-theme="dark"] .hero-enter,:root[data-theme="dark"] .home-view .hero-enter{background:rgba(38,47,52,.9);border-color:rgba(255,255,255,.14);color:#f0f3f4;box-shadow:0 8px 24px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.08)}
:root[data-theme="dark"] .hero-enter:hover,:root[data-theme="dark"] .home-view .hero-enter:hover{background:#303a3f}
:root[data-theme="dark"] .pill-button:not(.dark),:root[data-theme="dark"] .tree-zoom button{background:#273034;border-color:#414c51;color:#edf1f2}
:root[data-theme="dark"] .pill-button:not(.dark):hover,:root[data-theme="dark"] .tree-zoom button:hover{background:#354146}
:root[data-theme="dark"] .pill-button.dark{background:#126d7c;border-color:#34899a;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.24)}
:root[data-theme="dark"] .pill-button.dark:hover{background:#177c8d}
:root[data-theme="dark"] .icon-button,:root[data-theme="dark"] .password-toggle,:root[data-theme="dark"] .relation-kind-current,:root[data-theme="dark"] .relation-person-choice,:root[data-theme="dark"] .kin-person{background:#273034;border-color:#414c51;color:#edf1f2}
:root[data-theme="dark"] .gender-options{background:rgba(255,255,255,.055);border-color:#414c51}
:root[data-theme="dark"] .gender-option span{color:#edf1f2}
:root[data-theme="dark"] .gender-option input:checked+span{background:#3b484d;box-shadow:0 3px 12px rgba(0,0,0,.25);color:#fff}
:root[data-theme="dark"] .elder-avatar{background:#252e32;border-color:#465258;color:#edf1f2}
:root[data-theme="dark"] .relation-path{background:#242d31;color:#edf1f2}
:root[data-theme="dark"] .toast{background:rgba(37,46,50,.97);border:1px solid #536066;color:#f4f6f7}
:root[data-theme="dark"] .tree-stage{background:#1d2428;border-color:#384247;box-shadow:inset 0 1px rgba(255,255,255,.06)}
:root[data-theme="dark"] .tree-person,:root[data-theme="dark"] .tree-person.selected{background:rgba(41,51,56,.94);border-color:#4a575d;color:#edf1f2}
:root[data-theme="dark"] .tree-person small,:root[data-theme="dark"] .tree-kinship{color:#bdc7ca!important}
:root[data-theme="dark"] .tree-empty-note,:root[data-theme="dark"] .tree-preview,:root[data-theme="dark"] .preview-actions button{background:rgba(34,42,46,.96);border-color:#414c51;color:#edf1f2}
:root[data-theme="dark"] .person-content,:root[data-theme="dark"] .page{color:#edf1f2}
:root[data-theme="dark"] .person-hero .person-relationship{background:rgba(20,26,29,.76);border-color:rgba(255,255,255,.18);color:#edf1f2}
:root[data-theme="dark"] .story-columns,:root[data-theme="dark"] .disclosure,:root[data-theme="dark"] .memory-tabs,:root[data-theme="dark"] .event-row,:root[data-theme="dark"] .family-generation,:root[data-theme="dark"] .admin-row,:root[data-theme="dark"] .admin-primary{border-color:#384247}
:root[data-theme="dark"] .memory-tabs button[aria-pressed=true],:root[data-theme="dark"] .admin-tabs button[aria-current=page]{color:#f4f6f7}
:root[data-theme="dark"] .memory-media,:root[data-theme="dark"] .audio-visual,:root[data-theme="dark"] .memory-photo-pending,:root[data-theme="dark"] .timeline-media-pending{background:#252e32;border-color:#424e53;color:#d4dcdf}
:root[data-theme="dark"] .map-hero,:root[data-theme="dark"] .map-empty{background:#20282c;border-color:#3b474c;color:#e5eaec}
:root[data-theme="dark"] .map-land{fill:#2c373c;stroke:#58656a}
:root[data-theme="dark"] .map-place,:root[data-theme="dark"] .result-person,:root[data-theme="dark"] .search-field{border-color:#3a4449}
:root[data-theme="dark"] .map-empty-copy{background:rgba(34,42,46,.9);color:#edf1f2}
:root[data-theme="dark"] .tree-empty-state,:root[data-theme="dark"] .identity-empty-state,:root[data-theme="dark"] .admin-empty{background:transparent;color:#edf1f2}
:root[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]),:root[data-theme="dark"] textarea,:root[data-theme="dark"] select{background-color:#222a2e;border-color:#465258;color:#edf1f2}
:root[data-theme="dark"] .search-field input,:root[data-theme="dark"] .admin-tools input,:root[data-theme="dark"] .admin-tools select,:root[data-theme="dark"] .upload-form input,:root[data-theme="dark"] .upload-form textarea,:root[data-theme="dark"] .upload-form select,:root[data-theme="dark"] .login-form input,:root[data-theme="dark"] .admin-form input,:root[data-theme="dark"] .admin-form select{background-color:#222a2e;border-color:#465258;color:#edf1f2}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:#9da9ad;opacity:1}
:root[data-theme="dark"] .sheet-dialog,:root[data-theme="dark"] .relation-picker,:root[data-theme="dark"] .relation-kind-menu{background:#20272b;border-color:#414c51;color:#edf1f2}
:root[data-theme="dark"] .sheet-dialog::backdrop{background:rgba(0,0,0,.66)}
:root[data-theme="dark"] .identity-choice:hover,:root[data-theme="dark"] .relation-kind-menu button:hover,:root[data-theme="dark"] .relation-person-choice:hover{background:rgba(255,255,255,.1)}
:root[data-theme="dark"] .identity-choice small,:root[data-theme="dark"] .relation-person-choice small,:root[data-theme="dark"] .upload-form small,:root[data-theme="dark"] .sheet-dialog .lead-small{color:#bcc6c9}
:root[data-theme="dark"] .photo-mark-tools,:root[data-theme="dark"] .photo-mark,:root[data-theme="dark"] .hero-photo-empty,:root[data-theme="dark"] .person-hero-empty{background:#242d31;border-color:#465258;color:#dbe2e4}
:root[data-theme="dark"] .elder-exit-bottom{background:rgba(33,41,45,.96);border-color:#465258;color:#edf1f2}
:root[data-theme="dark"] .elder-mode #app .memory-empty-art,:root[data-theme="dark"] body:not(.elder-mode) #app .memory-empty-art{background:linear-gradient(145deg,#273136,#20282c);border-color:#465258;color:#edf1f2}
:root[data-theme="dark"] .memory-empty-art small{color:#c3cdd0}
:root[data-theme="dark"] :where(button,a,input,select,textarea):focus-visible{outline-color:#7bd7e7!important;box-shadow:0 0 0 4px rgba(23,29,32,.96),0 6px 20px rgba(0,0,0,.35)!important}
@media(prefers-reduced-transparency:reduce){:root[data-theme="dark"] .topbar,:root[data-theme="dark"] .mobile-nav,:root[data-theme="dark"] .tree-preview,:root[data-theme="dark"] .sheet-dialog,:root[data-theme="dark"] .tree-empty-note,:root[data-theme="dark"] .map-empty-copy{background:#20272b!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@media(max-width:680px){body.elder-mode .elder-nav button.theme-toggle{min-height:44px;padding:5px 7px;gap:5px;font-size:15px}body.home-view.elder-mode .elder-nav button.theme-toggle{min-height:44px;padding:5px 7px;gap:5px;font-size:15px}}

/* Keep secondary and empty-state copy readable on every page in night mode. */
:root[data-theme="dark"] .person-hero-empty .person-hero-copy,
:root[data-theme="dark"] .person-hero-empty .person-hero-copy .eyebrow,
:root[data-theme="dark"] .person-hero-empty .person-years,
:root[data-theme="dark"] .person-photo-empty,
:root[data-theme="dark"] .memory-empty-stage p:not(.eyebrow),
:root[data-theme="dark"] .timeline-empty>p:not(.eyebrow),
:root[data-theme="dark"] .map-empty-copy small,
:root[data-theme="dark"] .relationship-path-list small,
:root[data-theme="dark"] .duplicate-name-note,
:root[data-theme="dark"] .relation-preview{color:#c3cdd0!important}
:root[data-theme="dark"] .relationship-path-list strong{color:#edf1f2}
:root[data-theme="dark"] .relationship-path-list li:not(:last-child)::before{background:#68777c}
:root[data-theme="dark"] .relationship-path-list li::after{background:#91a0a4}
:root[data-theme="dark"] .relationship-path-list li:first-child::after{background:#5bc9df}
:root[data-theme="dark"] .danger-link,
:root[data-theme="dark"] .danger-button{color:#ffaaa0!important}
:root[data-theme="dark"] .danger-button{border-color:#754842;background:#342725}
:root[data-theme="dark"] .relation-choice-group span{background:#252e32;border-color:#465258;color:#edf1f2}
:root[data-theme="dark"] .relation-choice-group input:checked+span{background:#3b484d;border-color:#65757b;color:#fff}
:root[data-theme="dark"] .relation-kind-menu button{color:#edf1f2}
:root[data-theme="dark"] .relation-kind-menu button:hover,
:root[data-theme="dark"] .relation-kind-menu button:focus-visible{background:rgba(255,255,255,.1)}
:root[data-theme="dark"] body.elder-mode .elder-nav button{color:#d0d8db}
:root[data-theme="dark"] body.elder-mode .elder-nav button[aria-current=page]{color:#fff}
:root[data-theme="dark"] body.elder-mode .elder-nav button:hover,
:root[data-theme="dark"] body.elder-mode .elder-nav button:focus-visible{background:rgba(255,255,255,.12);color:#fff}
:root[data-theme="dark"] body.elder-mode .elder-nav .theme-toggle{color:#edf1f2;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
:root[data-theme="dark"] body.elder-mode .elder-nav .theme-toggle:hover{background:rgba(255,255,255,.15)}
:root[data-theme="dark"] .home-view .home-who-button{color:#e3eaec}
:root[data-theme="dark"] .home-view .home-who-button:hover{color:#fff}
:root[data-theme="dark"] .home-view .home-who-button:focus-visible{outline-color:#7bd7e7}
:root[data-theme="dark"] .identity-choice{color:#edf1f2;border-color:#414c51}
:root[data-theme="dark"] .identity-choice small{color:#bcc6c9}
:root[data-theme="dark"] .photo-mark>span{color:#c3cdd0}
:root[data-theme="dark"] .photo-mark-keyboard-controls{background:#20282c;border-color:#465258}
:root[data-theme="dark"] .photo-mark-keyboard-controls p{color:#c3cdd0}
:root[data-theme="dark"] .photo-mark-keyboard-buttons button{background:#293338;border-color:#465258;color:#edf1f2}
:root[data-theme="dark"] .person-box{border-color:#62d5eb;background:rgba(8,93,111,.68);color:#f0fcff;box-shadow:0 0 0 1px rgba(6,16,19,.72)}
:root[data-theme="dark"] .person-box.drawing{background:rgba(8,93,111,.82)}
:root[data-theme="dark"] body.elder-mode #app .memory-empty-art span{color:#edf1f2}
:root[data-theme="dark"] body.elder-mode #app .memory-empty-art small{color:#c3cdd0}
:root[data-theme="dark"] .search-field:focus-within{border-color:#5bc9df;box-shadow:inset 0 -2px #5bc9df}
:root[data-theme="dark"] .search-field{background:transparent;border-color:#3a4449}
:root[data-theme="dark"] .search-field input{background:transparent;border:0;box-shadow:none;outline:0;border-radius:0}
:root[data-theme="dark"] .search-field input[type="search"]{background-color:transparent}
:root[data-theme="dark"] .search-field input:focus-visible{outline:0!important;box-shadow:none!important}