@import url('fonts.css');
:root {--app-surface:#fef9f6;--paper:#fefefd;--cream:#fef1ee;--cocoa:#592810;--rose:#e9a7ad;--rose-dark:#b86d77;--ink:#4d2d25;--muted:#917a72;--border:#eadbd5;--card:rgba(255,253,251,.83);--serif:'Cormorant Garamond',Georgia,serif;--sans:Inter,'Noto Sans SC',Arial,sans-serif}
*{box-sizing:border-box}html{background:#e9e0dc}body{margin:0;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;min-width:300px}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #bd7480;outline-offset:3px}a{color:inherit}.desk-note{position:fixed;left:calc(50% + 245px);top:calc(50% - 220px);max-width:235px;color:#806960;font-size:12px;line-height:1.8}.desk-note h2{font:500 25px/1.2 var(--serif);margin:0 0 8px}.desk-note p{margin:0 0 13px}.sample-controls{display:flex;flex-direction:column;gap:8px}.sample-controls button{border:1px solid #cab8ae;border-radius:99px;padding:8px 12px;text-align:left;background:#fff8f5;color:#78463c;font-size:11px}.device{width:min(100%,420px);height:min(900px,100dvh);min-height:690px;margin:0 auto;position:relative;overflow:hidden;background:radial-gradient(ellipse 220px 250px at 87% 34%,#ffe8e698,transparent 90%),radial-gradient(ellipse 285px 230px at 6% 77%,#fcece8db,transparent 90%),linear-gradient(156deg,#fffefc 5%,#fff9f5 52%,#fdf1ed 100%);box-shadow:0 25px 75px #553b352d;isolation:isolate}
@media(min-width:550px){body{min-height:100dvh;display:grid;place-items:center;padding:22px}.device{border-radius:43px;height:min(870px,calc(100dvh - 44px));border:8px solid #fbf6f3;box-shadow:0 0 0 1px #eee4df,0 25px 70px #553b3547}.device:after{content:'';position:absolute;inset:0;border-radius:36px;box-shadow:inset 0 0 0 1px #ffffffb0;pointer-events:none;z-index:30}}
@media(max-width:950px){.desk-note{display:none}}
.screen{position:absolute;inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none;animation:screen-in .24s ease both}.screen::-webkit-scrollbar{display:none}.screen[hidden]{display:none}.home{display:flex;flex-direction:column;padding:17px 24px 0;overflow:hidden}.home h1{font:500 45px/.95 var(--serif);letter-spacing:-.8px;color:var(--cocoa);margin:33px 0 9px}.sub{font-size:12px;line-height:1.5;color:#917b73;letter-spacing:-.1px;margin:0}.threads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.threads path{fill:none;stroke:#d9a7a1;stroke-width:1.25;opacity:.57;stroke-dasharray:3 5;stroke-linecap:round}.threads circle{fill:#e8b5ad;opacity:.85}.avatar{width:87%;height:87%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 32% 24%,#fff8f2,#e9cfce);color:#966b65;font:500 55px/1 var(--serif);box-shadow:inset 0 0 0 1px #fff8f4;overflow:hidden}.avatar img{width:100%;height:100%;display:block;object-fit:cover}.btn{border:1px solid #dfbeb5;border-radius:100px;background:#fffaf8;color:var(--cocoa);display:inline-flex;justify-content:center;align-items:center;gap:8px;font-size:12px;font-weight:600;padding:12px 15px;transition:transform .12s ease,box-shadow .15s ease;min-height:43px}.btn:active{transform:scale(.97)}.btn-primary{background:linear-gradient(110deg,#bd7b84,#d79b9e);border-color:#c68a90;color:white;box-shadow:0 5px 12px #cf949049}.btn svg{height:16px;width:16px;flex:none}.eyebrow{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#aa877b;font-weight:600}.inner{padding:18px 25px 34px;min-height:100%}.iconbtn{border:1px solid #eadbd5;background:#fffaf8ab;border-radius:50%;height:38px;width:38px;display:grid;place-items:center;color:var(--cocoa);flex:none}.page-title{font:500 40px/1 var(--serif);color:var(--cocoa);margin:10px 0 8px;letter-spacing:-.4px}.page-intro{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 22px}.paper-card{background:var(--card);border:1px solid #efe0d8;border-radius:23px;box-shadow:0 8px 24px #b8877a14;padding:20px;margin-bottom:13px}.identity{display:flex;align-items:center;gap:15px;padding:19px}.identity .small-avatar{width:68px;height:68px;font:500 40px var(--serif);background:linear-gradient(140deg,#fff8ed,#e8d5d0);border:4px solid white;border-radius:50%;display:grid;place-items:center;color:#986f65;box-shadow:0 4px 14px #a8736426}.identity strong{display:block;font-size:16px;color:var(--cocoa);margin-bottom:6px}.identity span{font-size:11px;color:var(--muted)}.sectionlabel{font-size:10px;letter-spacing:.9px;color:#a88a7f;text-transform:uppercase;margin:24px 3px 12px;font-weight:600}.moment{margin:0 0 11px;padding:18px 19px;background:#fffdfaeb;border:1px solid #f1e2dd;border-radius:20px}.moment-head{display:flex;justify-content:space-between;gap:9px;align-items:center;margin-bottom:10px;font-size:11px;color:#a48b80}.moment-head strong{color:#8d5b52;font-weight:600}.moment blockquote{padding:0;margin:0;font:400 17px/1.43 var(--serif);color:#613b30;white-space:pre-wrap}.moment.mine{background:#fdf0ebcc}.smallhint{font-size:11px;color:#a08479;line-height:1.65}.stack{display:grid;gap:11px}.field label{display:block;font-size:11px;color:#886b60;font-weight:600;margin-bottom:8px}.field input,.field textarea{width:100%;border:1px solid #e4d1c7;outline-offset:2px;border-radius:14px;padding:12px 13px;background:#fffefa;resize:vertical;color:#5c382d;font-size:13px}.field textarea{min-height:175px;line-height:1.7}.field input:focus,.field textarea:focus{border-color:#c78c92}.field .muted{font-size:10px;color:#a68b7f;margin:6px 2px 0}.full{width:100%;margin-top:12px}.minirow{display:flex;justify-content:space-between;align-items:center;gap:10px}.textbutton{border:0;background:none;color:#a46f73;font-size:11px;padding:7px 0;text-decoration:underline;text-underline-offset:2px}.settings-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:16px 0;border-bottom:1px solid #f0e3dd}.settings-row:last-child{border-bottom:0}.settings-row b{font-size:12px;font-weight:600}.settings-row small{display:block;font-size:11px;margin-top:5px;color:#a08478}.tag{color:#ad7e74;background:#f9e9e4;border:1px solid #edd5ce;padding:5px 8px;border-radius:99px;font-size:10px;white-space:nowrap}.sheetveil{position:absolute;inset:0;z-index:20;background:#412c254a;display:none;align-items:flex-end}.sheetveil.open{display:flex}.sheet{background:linear-gradient(#fffdfb,#fff8f5);width:100%;border-radius:29px 29px 0 0;padding:19px 25px max(32px, env(safe-area-inset-bottom) + 18px);box-shadow:0 -10px 32px #5b332a22;max-height:85%;overflow:auto}.sheet-top{display:flex;justify-content:space-between;align-items:center}.sheet h2{font:500 30px var(--serif);margin:9px 0}.sheet p{font-size:12px;color:var(--muted);line-height:1.6}.choice{display:flex;align-items:center;gap:13px;width:100%;border:1px solid #eee1d9;background:#fffefd;border-radius:16px;padding:12px;margin-top:9px;text-align:left;color:#69443a}.choice-circle{width:36px;height:36px;display:grid;place-items:center;background:#fae9e6;border-radius:50%;color:#996d67;font:500 22px var(--serif)}.choice strong{font-size:12px}.choice small{display:block;font-size:10px;color:#a38a7e;margin-top:2px}.choice svg{margin-left:auto}.success{padding:14px;background:#f7eee7;border-radius:14px;font-size:11px;color:#886d5f;line-height:1.6}.previewonly{font-size:10px;color:#a58e81;text-align:center;margin:15px 0 0}.toast{position:absolute;bottom:16px;left:20px;right:20px;z-index:40;padding:12px 14px;background:#5b352c;color:#fff8f2;border-radius:14px;box-shadow:0 8px 22px #52372c45;font-size:11px;line-height:1.6;text-align:center;display:none}.toast.show{display:block}.moment time{font-size:10px;color:#ac9389}.draft-preview{padding:16px 18px;background:#fffefd;border:1px solid #efded5;border-radius:16px;white-space:pre-wrap;font:18px/1.45 var(--serif);min-height:115px;color:#693e31}.two-actions{display:flex;gap:9px}.two-actions .btn{flex:1}.spacehead{display:flex;gap:15px;align-items:center}.spacehead .person-portrait{width:66px;height:66px;border:4px solid white;border-radius:50%;background:linear-gradient(140deg,#fffbf5,#eeddd7);display:grid;place-items:center;font:500 39px var(--serif);box-shadow:0 5px 17px #ba928626;color:#947169}.spacehead h1{margin:0 0 2px}.spacehead span{font-size:11px;color:var(--muted)}
@keyframes screen-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media(max-height:790px){.home h1{margin-top:18px}}
/* Round 1: retain the original constellation and paper surfaces. */

:root{--muted:#80685e;--emotional:'LXGW WenKai',Georgia,serif}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
[hidden]{display:none!important}.demo-disclaimer{margin-top:19px!important;font-size:10px}.home-header{display:flex;justify-content:space-between;align-items:center;gap:10px}.language-control:focus-within{outline:2px solid #bd7480;outline-offset:2px}.home h1{margin-top:28px}.sub{color:#80685e}.relation-badge{display:inline-block;position:absolute;top:-9px;right:-19px;border:1px solid #e4ccc4;background:#fff8f4;color:#835d51;border-radius:8px 8px 8px 2px;padding:3px 7px;font:500 9px/1.25 var(--sans);white-space:nowrap;box-shadow:0 2px 5px #9e756512}.relation-badge.special{color:#805b26;border-color:#d8bd82;background:linear-gradient(120deg,#fffbec,#f5e7c5);box-shadow:0 2px 9px #c2a06220}.relation-badge.special:before{content:'✧';margin-right:3px;font-size:10px}.space-name-wrap{position:relative;display:inline-block;margin:8px 24px 8px 0}.space-name-wrap .relation-badge{font-size:10px;top:-9px;right:-29px;color:#835d51}.space-name-wrap .special{color:#805b26}.space-name-wrap h1{font-size:34px}.spacehead>div:last-child{min-width:0}.spacehead span{font-size:11px}.spacehead .relation-badge{font-size:9px}
.moment{display:block;width:100%;text-align:left;color:inherit;cursor:pointer;position:relative}.moment:hover{border-color:#d9b2a5}.moment-head{font-size:11px;color:#826b60;flex-wrap:wrap}.moment time{color:#80675d}.moment blockquote{font-family:var(--emotional);line-height:1.65;font-size:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.moment-open{display:block;text-align:right;font:500 10px var(--sans);color:#966667;margin-top:13px}.timeline{position:relative;padding-left:13px;border-left:1px solid #e7d0c5}.timeline .moment:before{content:'';position:absolute;left:-18px;top:25px;border-radius:50%;width:7px;height:7px;background:#ce9e90;border:2px solid #fff9f5}.sort-note{font-size:9px;color:#806b60;margin-top:12px}.memories{border:1px solid #e7d7bd;background:linear-gradient(130deg,#fffaf0,#fff9f6);padding:0 14px 4px;border-radius:20px;margin-top:8px}.memories .sectionlabel{margin-top:17px;color:#876638}.memory-intro{margin-top:-5px}.memories .moment{background:#fffdf9;border-color:#f0e5d6}.emotional-content{font:17px/1.75 var(--emotional);color:#613b30;overflow-wrap:anywhere;white-space:pre-wrap}.emotional-content p{margin:0 0 12px}.emotional-content h2{font-size:22px;line-height:1.5;margin:4px 0 14px}.emotional-content ul,.emotional-content ol{padding-left:24px;margin:8px 0}.emotional-content li{white-space:pre-wrap}.detail-card{margin-top:18px}.reply-field textarea{min-height:100px}.reply-item{border-left:2px solid #ddbbb0;padding:12px 14px;margin-bottom:12px;background:#fffdf9;border-radius:0 14px 14px 0}.reply-item p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font:16px/1.7 var(--emotional)}.selected-recipient{display:flex;align-items:center;gap:12px;background:#fffaf6;border:1px solid #ead9d0;padding:13px 16px;margin-bottom:22px;border-radius:17px;position:relative}.selected-recipient strong{display:block;margin-top:3px;font-size:14px}.selected-recipient .relation-badge{position:static;margin-left:auto}.selected-recipient .choice-circle{flex:none}.rich-editor{border:1px solid #dbc6bc;border-radius:15px;overflow:hidden;background:#fffefa}.editor-toolbar{display:flex;align-items:center;gap:2px;padding:8px;border-bottom:1px solid #eee1d8;background:#fcf4ee;flex-wrap:wrap}.editor-toolbar button{width:32px;min-height:34px;padding:5px 4px;background:transparent;border:0;color:#6e4636;border-radius:7px;font-size:13px}.editor-toolbar button:hover,.editor-toolbar button[aria-pressed=true]{background:#ecd7ce}.editor-toolbar button:last-child{width:auto;min-width:38px;font-size:10px}.editor-toolbar button[data-command=bold]{font-weight:700}.editor-toolbar button[data-command=italic]{font-style:italic}.editor-toolbar button[data-command=underline]{text-decoration:underline}.editor-surface{height:224px;min-height:180px;max-height:520px;overflow-y:auto;padding:16px;outline-offset:-3px;white-space:pre-wrap}.editor-surface:empty:before{content:attr(data-placeholder);color:#947b6e;pointer-events:none}.editor-resize{width:100%;height:25px;display:grid;place-items:center;background:#fffaf6;border:0;border-top:1px solid #f0e4dc;cursor:ns-resize;touch-action:none}.editor-resize span{width:32px;height:3px;border-radius:3px;background:#ccb6a9}.editor-meta{align-items:flex-start;margin:8px 0}.editor-meta .muted{font-size:10px;color:#80695d;margin:0}.editor-meta .smallhint{white-space:nowrap;font-size:10px}#reviewPerson{font:500 30px var(--serif);margin:10px 0 0;color:#592810}.draft-preview{white-space:normal}.smallhint,.previewonly,.field .muted,.page-intro{color:#80695e}.tag{color:#885c4f}.textbutton{color:#95606a}.field input::placeholder,.field textarea::placeholder{color:#947b6e}.choice small{color:#80695d}.name,.space-name-wrap h1{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[lang^=zh] {--sans:Inter,'Noto Sans SC','Noto Sans TC',sans-serif}html[lang=zh-TW]{--sans:Inter,'Noto Sans TC','Noto Sans SC',sans-serif}html[lang^=zh] .home h1{font:500 32px/1.35 var(--sans);letter-spacing:1px;margin-top:26px}html[lang^=zh] .page-title{font:500 30px/1.4 var(--sans)}html[lang^=zh] .eyebrow{letter-spacing:1px}
@media(max-height:790px){.home h1{margin-top:20px}}
@media(max-width:360px){.home{padding-left:18px;padding-right:18px}.relation-badge{right:-10px}.inner{padding-left:21px;padding-right:21px}}
@media(max-height:680px){.device{min-height:0;height:100dvh}.home{overflow-y:auto}.home h1{margin-top:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.btn-primary{background:linear-gradient(110deg,#9d5966,#a4616b);border-color:#975664;color:#fffaf7}.eyebrow{color:#85685b}.field label{color:#795c4f}.sort-note{color:#80685e}
/* Round 2: quieter actions, a navigable constellation, and personal dates. */
.home{padding-top:15px}.home-header{min-height:46px;position:relative;z-index:15;flex:none}.top-brand{display:flex;align-items:center;gap:5px;width:max-content}.brandmark{width:58px;height:46px;object-fit:contain;display:block}.top-brand b{font:500 34px/1 var(--serif);letter-spacing:-1px;color:var(--cocoa)}.language-wrap{position:relative}.language-control{display:flex;align-items:center;gap:5px;color:#8a6d60;background:#fffdf88c;border:1px solid #e9ded6;border-radius:19px;min-height:32px;padding:6px 8px;font:500 10px/1 var(--sans)}.language-control:hover{background:#fffdfb}.language-menu{position:absolute;top:calc(100% + 10px);right:0;width:165px;padding:8px;background:#fffcf8f7;border:1px solid #ebdcd3;border-radius:17px;box-shadow:0 14px 36px #5f372323;backdrop-filter:blur(16px);animation:screen-in .16s ease;z-index:25}.language-menu-title{font-size:9px;color:#91786a;padding:7px 10px 8px}.language-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;border-radius:10px;background:transparent;padding:11px 10px;color:#654632;font-size:12px;min-height:39px}.language-menu button span:last-child{color:#ae7379;opacity:0}.language-menu button[aria-checked=true]{background:#f8ede6}.language-menu button[aria-checked=true] span:last-child{opacity:1}.language-menu button:hover{background:#f9f1eb}.home h1{font-size:41px;margin:20px 0 8px}.home .sub{font-size:11px}.graph-instruction{font-size:9px;color:#937e71;margin:0 0 3px;line-height:1.5}.spacehead{align-items:flex-start;gap:15px}.spacehead .person-portrait{flex:none;margin-top:6px}.spacehead>div:last-child{flex:1;min-width:0}.space-name-wrap{display:block;width:max-content;max-width:calc(100% - 28px);margin:8px 22px 7px 0}.space-name-wrap h1{max-width:175px}.spacehead .space-description{display:block;line-height:1.65;max-width:235px;color:#8b7164;font-size:11px}.space-name-wrap .relation-badge{right:-28px}.minirow>.smallhint{max-width:68%}#editRelation{flex:none;font-size:10px}
.anniversary-card{padding:15px 16px 6px;border-radius:18px;border:1px solid #ebdfd1;background:#fffaf1a3;margin:3px 0 18px}.anniversary-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}.anniversary-heading h2{font:500 21px/1.2 var(--serif);margin:0;color:#795a3d}.anniversary-heading span{display:block;font-size:9px;color:#9a816c;margin-top:3px}.calendar-add{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid #e4d5c2;background:#fffdf7;color:#987559;font-size:19px}.anniversary-row{display:flex;align-items:center;gap:9px;width:100%;padding:11px 0;border:0;border-top:1px solid #eee3d5;background:none;text-align:left;color:#75543e}.anniversary-row:hover .date-copy strong{text-decoration:underline;text-underline-offset:3px}.date-symbol{font-size:22px;line-height:1;color:#b18c68;width:24px;text-align:center;flex:none}.date-copy{flex:1;min-width:0}.date-copy strong{display:block;font-size:11px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.date-copy small{display:block;font-size:9px;line-height:1.5;color:#977c64;margin-top:4px}.date-distance{font-size:9px;color:#a4775f;white-space:nowrap}.date-chevron{font-size:16px;color:#ba9c83}.date-empty{font:13px/1.7 var(--emotional);color:#a08770;margin:10px 0 13px}.date-presets{display:flex;gap:6px;flex-wrap:wrap;margin:15px 0}.date-preset{border:1px solid #e4d5c7;border-radius:20px;background:#fffaf3;color:#8e6c51;padding:7px 10px;font-size:10px}.date-preset:hover{background:#f6e9d9}.annual-choice{display:flex;align-items:center;gap:8px;margin-top:17px;color:#87694f;font-size:12px}.annual-choice input{accent-color:#b78070;width:17px;height:17px}.remove-date{display:block;margin:12px auto 0;color:#9c6562}.field input[type=date]{min-height:45px}.membership-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 17px;margin-top:21px;border:1px solid #e8d9cc;border-radius:17px;background:linear-gradient(110deg,#fdf8ef,#f6eade);box-shadow:none;min-height:68px}.membership-compact-copy .eyebrow{font-size:8px;letter-spacing:1.1px;color:#9a7a5c}.membership-compact-copy strong{display:block;font:500 11px/1.6 var(--sans);color:#795e48;margin-top:5px}.membership-info{flex:none;width:29px;height:29px;background:#fffaf2;border:1px solid #dfcdb9;border-radius:50%;color:#9c7b58;font:italic 500 15px Georgia,serif}
html[lang^=zh] .home h1{font:500 29px/1.4 var(--sans);margin:18px 0 7px}html[lang^=zh] .anniversary-heading h2{font:500 15px/1.4 var(--emotional)}
@media(max-width:360px){.home{padding-left:17px;padding-right:17px}.brandmark{width:54px;height:44px}.top-brand b{font-size:32px}.language-control{padding:6px;gap:4px}.spacehead .person-portrait{width:57px;height:57px}.space-name-wrap h1{max-width:135px}.anniversary-card{padding-left:13px;padding-right:13px}}
@media(max-height:790px){.home h1{margin-top:12px}html[lang^=zh] .home h1{margin-top:12px}}
@media(max-height:680px){.home{overflow-y:auto}.home h1{margin-top:14px}}
/* Round 3: a full-bleed graph behind protected, frosted reading surfaces. */
#home{inset:0;display:block;padding:60px 24px 0;overflow:hidden;isolation:isolate}
#home .graph-viewport{position:absolute;inset:0;width:auto;height:auto;min-height:0;max-height:none;margin:0;border-radius:0;overflow:hidden;mask-image:none;-webkit-mask-image:none;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;z-index:0}
#home .graph-viewport.is-dragging{cursor:grabbing}
#home .graph-viewport:before{content:'';position:absolute;inset:8% -10% 2%;width:120%;height:90%;background:radial-gradient(ellipse at 52% 46%,#f5ddcb52,transparent 68%);filter:blur(18px);pointer-events:none;z-index:-1}
#home .graph-viewport:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 19% 33%,#dfc4b24d 1px,transparent 2px),radial-gradient(circle at 78% 69%,#d4b3a54d 1px,transparent 2px);pointer-events:none}
.home-heading{position:relative;z-index:12;pointer-events:auto}.home-heading .home-header{margin:0}.home-heading h1,.home-heading .sub{position:relative;z-index:1}
.home-top-glass,.home-bottom-glass{position:absolute;left:0;right:0;z-index:3;pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.home-top-glass{top:0;height:236px;background:linear-gradient(180deg,#fffcf56b 0%,#fffbf447 64%,#fffaf510 100%);mask-image:linear-gradient(#000 0%,#000 78%,transparent);-webkit-mask-image:linear-gradient(#000 0%,#000 78%,transparent)}
.home-bottom-glass{bottom:0;height:211px;background:linear-gradient(0deg,#fff7ef52,#fff6eb2e 63%,#fff7f000);mask-image:linear-gradient(0deg,#000 0%,#000 76%,transparent);-webkit-mask-image:linear-gradient(0deg,#000 0%,#000 76%,transparent)}
#home .graph-footer{position:absolute;left:24px;bottom:146px;width:calc(100% - 160px);z-index:8;display:block;padding:0;pointer-events:none}
.graph-instruction{margin-bottom:4px;line-height:1.6}







@media(max-width:360px){#home{padding-left:17px;padding-right:17px}#home .graph-footer{left:18px;width:calc(100% - 140px)}}
@media(max-height:790px){#home .graph-footer{bottom:137px}.home-top-glass{height:222px}}
@media(max-height:680px){#home{padding-top:56px}.home-top-glass{height:216px}.home-bottom-glass{height:199px}#home .graph-footer{bottom:136px}}

.graph-viewport .graph-world{z-index:1}

.home-heading h1,.home-heading .sub{ text-shadow:0 1px 5px #fffaf5,0 0 12px #fffaf5b3 }

/* Space: quiet, open tabs beneath the shared identity. */
.space-tabs{position:relative;display:flex;gap:8px;border-bottom:1px solid #e9d8d0;margin:14px 0 22px;padding-bottom:1px;isolation:isolate}
.space-tabs:after{content:'';position:absolute;left:0;bottom:-1px;width:calc((100% - 8px)/2);height:2px;border-radius:3px;background:linear-gradient(90deg,#c18b7c,#bd7b85,#d8b7a1);transition:transform .22s ease}
.space-tabs[data-active=dates]:after{transform:translateX(calc(100% + 8px))}
.space-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:0;border-radius:12px 12px 0 0;padding:10px 5px 14px;background:transparent;color:#977c70;font:500 12px/1.5 var(--sans);transition:color .2s,background .2s}
.space-tab svg{width:17px;height:17px;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.75}
.space-tab[aria-selected=true]{color:#85504b;background:linear-gradient(0deg,#f7e8e045,transparent 78%)}
.space-tab[aria-selected=true] svg{opacity:1}
.space-tab:hover{color:#85504b;background:#fbede544}
.space-tab:focus-visible{outline-offset:-3px}
/* A fixed identity/tab stack above one independently scrollable panel. */
#space{overflow:hidden}
#space>.inner{height:100%;min-height:0;display:flex;flex-direction:column;padding-bottom:0}
#space .spacehead,#space .space-tabs{flex:none}
#space .space-tabs{margin-bottom:0}
#space .space-panel{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:none;padding:22px 0 0;scroll-padding-bottom:115px;animation:space-panel-in .2s ease both}
#space .space-panel::-webkit-scrollbar{display:none}
#space .space-panel:after{content:'';display:block;height:max(145px,calc(env(safe-area-inset-bottom,0px) + 115px));pointer-events:none}
.space-panel:focus-visible{outline:2px solid #bd7480;outline-offset:-2px;border-radius:14px}
#spacePanelMoments>.minirow .sectionlabel{margin-top:2px}
#spacePanelMoments>.minirow .sort-note{margin-top:0}
#spacePanelMoments .memories{margin:0 0 23px}
#spacePanelDates .anniversary-card{margin:0;padding:19px 17px 9px;background:linear-gradient(140deg,#fffbf5b8,#fff8f14d);border-color:#ecdfd2;border-radius:21px}
#spacePanelDates .anniversary-heading{margin-bottom:15px}
#spacePanelDates .anniversary-heading h2{font-size:24px}
#spacePanelDates .anniversary-heading span{font-size:10px;margin-top:5px}
#spacePanelDates .anniversary-row{padding:17px 0;gap:10px}
#spacePanelDates .date-copy strong{font-size:12px;max-width:none;white-space:normal;overflow-wrap:anywhere}
#spacePanelDates .date-copy small{font-size:10px;margin-top:5px}
#spacePanelDates .date-empty{margin:22px 0 25px;line-height:1.9}
html[lang^=zh] .space-tab{letter-spacing:1px}
html[lang^=zh] #spacePanelDates .anniversary-heading h2{font:500 18px/1.5 var(--emotional)}
@keyframes space-panel-in{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}

/* Space identity: two people, vertically joined, with Me in front. */
.spacehead{align-items:center;gap:15px;margin-bottom:23px}
.space-avatar-pair{--portrait-size:66px;position:relative;flex:0 0 var(--portrait-size);width:var(--portrait-size);height:calc(var(--portrait-size)*1.5);isolation:isolate}
.spacehead .person-portrait{position:absolute;left:0;top:0;width:var(--portrait-size);height:var(--portrait-size);margin:0;border:4px solid #fffdfa;overflow:hidden;font-size:37px;box-shadow:0 5px 16px #a979641c}
.spacehead .portrait-self{top:calc(var(--portrait-size)*7/12);z-index:2;background:radial-gradient(circle at 32% 20%,#fff8eb,#e9d6b9);color:#80674e;box-shadow:0 4px 10px #93694825}
.spacehead .portrait-other{top:calc(var(--portrait-size)/-12);z-index:1;background:radial-gradient(circle at 32% 20%,#fff6f0,#ead4d0);color:#927064;align-items:end;padding-bottom:3px}
.spacehead .person-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* This demo source contains an inset, off-center circular frame. Fill the
   existing circular clip with the portrait, consistently on Home and Space. */
.avatar img.inset-demo-photo,.spacehead .person-portrait img.inset-demo-photo{transform:scale(1.5) translate(-2.35%,-13.53%)}
.space-identity-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:35px}
.space-identity-heading .eyebrow{font-size:9px;letter-spacing:1px}
.space-identity-heading #editRelation{align-self:flex-start;min-height:35px;padding:6px 0 9px 6px;font-size:10px;white-space:nowrap;flex:none}
.space-identity .space-name-wrap{margin-top:4px}
.spacehead+.space-tabs{margin-top:0}
@media(max-width:360px){.space-avatar-pair{--portrait-size:57px}.spacehead{gap:12px}.spacehead .person-portrait{font-size:32px}.space-identity-heading{gap:4px}.space-identity-heading .eyebrow{font-size:8px;letter-spacing:.5px}.space-identity-heading #editRelation{font-size:9px}}

/* Personal dates: looking back and looking forward have distinct meanings. */
.date-group+.date-group{margin-top:23px}
.date-group-heading{font:500 9px/1.5 var(--sans);letter-spacing:.65px;color:#9a7863;margin:0 0 7px;text-transform:uppercase}
#spacePanelDates .date-distance{max-width:108px;white-space:normal;text-align:right;line-height:1.6;font-variant-numeric:tabular-nums;font-size:10px}
#spacePanelDates .date-elapsed{color:#9b755e}
#spacePanelDates .date-upcoming{color:#a66e71}
.date-type-options{border:0;padding:0;margin:19px 0 9px;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.date-type-options legend{padding:0 0 9px;font-size:11px;font-weight:600;color:#886b60}
.date-type-option{border:1px solid #e6d6ca;border-radius:14px;padding:12px 10px;background:#fffdf8;cursor:pointer}
.date-type-option:has(input:checked){border-color:#c59686;background:#faeee5}
.date-type-option>span{display:flex;align-items:center;gap:6px}
.date-type-option input{accent-color:#b78070;margin:0;width:15px;height:15px;flex:none}
.date-type-option strong{font-size:10px;font-weight:500;color:#805d4d;line-height:1.5}
.date-type-option small{display:block;font-size:9px;line-height:1.7;margin-top:6px;color:#977b68}

/* A quiet, collapsed doorway to memories from every matching year. */
.memories{padding:0;overflow:hidden}
.memory-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 16px;border:0;background:transparent;text-align:left;color:inherit;min-height:66px}
.memory-toggle:focus-visible{outline-offset:-4px;border-radius:19px}
.memory-heading-copy{display:block;min-width:0}
.memory-toggle .sectionlabel{display:block;margin:0;color:#876638;font:600 10px/1.5 var(--sans);letter-spacing:.9px;text-transform:uppercase}
.memory-toggle .memory-intro{display:block;margin:5px 0 0;font:400 11px/1.55 var(--sans);color:#80695e}
.memory-chevron{display:grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid #e9dac6;border-radius:50%;color:#a48964;background:#fffdf77a}
.memory-chevron svg{width:18px;height:18px;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.memory-toggle[aria-expanded=true] .memory-chevron svg{transform:rotate(180deg)}
.memory-toggle:hover .memory-chevron{background:#f8edde;border-color:#d6be9b}
#memoryItems{padding:0 14px 5px}
.memory-year-heading{font:500 19px/1.4 var(--serif);color:#9a7c52;margin:1px 0 12px;padding-top:13px;border-top:1px solid #eadfcf}
.memory-year+.memory-year .memory-year-heading{margin-top:18px}
html[lang^=zh] .memory-year-heading{font:500 13px/1.6 var(--sans)}

/* Account: clear, quiet entrances for each piece of personal information. */
.account-identity{gap:12px}.account-identity .small-avatar{flex:none}
.account-name-copy{min-width:0;flex:1}
.account-name-copy strong{overflow-wrap:anywhere;line-height:1.45}
.account-identity #editProfile{flex:none;align-self:flex-start;min-height:36px;white-space:nowrap;font-size:10px}
.account-settings{padding:0 18px}
.account-setting{width:100%;border:0;border-bottom:1px solid #f0e3dd;background:transparent;text-align:left;color:inherit;min-height:79px;padding:17px 0;gap:10px}
.account-setting:hover .settings-action{color:#85484f;text-decoration:underline;text-underline-offset:3px}
.account-setting:focus-visible{outline-offset:4px;border-radius:10px}
.account-setting .setting-copy{min-width:0;flex:1}
.account-setting .setting-copy small{overflow-wrap:anywhere;line-height:1.65}
.settings-action{flex:none;color:#a16c70;font-size:10px}
.setting-chevron{width:14px;height:14px;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;flex:none;color:#b69a8a}
.account-demo-note{margin:13px 3px 18px;font-size:10px;line-height:1.7}
.account-actions{display:flex;gap:10px;margin:0 0 4px}
.account-actions .btn{flex:1;font-size:11px;min-height:44px;padding:11px 9px}
.sign-out{background:#fff8f4b3;border-color:#e6c8bd;color:#a16a63}
.sign-out:hover{background:#f8e9e1}
.demo-code{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin:17px 0;border-radius:15px;border:1px solid #ead7c9;background:#faf1e7;color:#96765f}
.demo-code span{font-size:9px;letter-spacing:.8px}
.demo-code code{font:500 22px/1 var(--sans);letter-spacing:4px;color:#936b50}
.signed-out-screen .inner{display:flex;flex-direction:column;padding:32px 30px 40px}
.signed-out-brand{display:flex;align-items:center;gap:5px;color:var(--cocoa)}
.signed-out-brand img{width:59px;height:47px;object-fit:contain}
.signed-out-brand>span{font:500 34px/1 var(--serif);letter-spacing:-1px}
.signed-out-copy{margin:auto 0;padding:55px 0 85px}
.signed-out-copy .page-title{font-size:43px;margin:13px 0 16px}
.signed-out-copy .page-intro{font-size:13px;line-height:1.9;margin-bottom:27px}
.signed-out-copy>.smallhint{font-size:10px;margin-top:17px;text-align:center}
html[lang^=zh] .signed-out-copy .page-title{font:500 26px/1.55 var(--emotional)}
@media(max-width:360px){.account-identity .small-avatar{width:57px;height:57px;flex:none}.account-identity{padding:15px;gap:10px}.account-settings{padding:0 15px}.account-setting{gap:7px}}

.profile-options{margin:12px 0 8px;display:grid;gap:10px}
.profile-option{margin:0;padding:16px 14px;gap:13px;min-height:79px;background:#fffcf8;border-color:#ebdcd2;border-radius:18px}
.profile-option:hover{background:#fcf2e9;border-color:#dfc6b7}
.profile-option-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:50%;background:#f8eae1;color:#aa8270;flex:none}
.profile-option-icon svg{width:21px;height:21px;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;margin:0}
.profile-option-copy{flex:1;min-width:0}
.profile-option-copy strong{font-weight:500}
.profile-option-copy small{line-height:1.65;overflow-wrap:anywhere;margin-top:6px}
.profile-option-arrow{font-size:22px;line-height:1;color:#ba9a87;flex:none}
.avatar-email-note{margin:19px 0 8px;padding:14px 16px;border:1px solid #ead8cb;background:#fcf3e9;border-radius:15px}
.avatar-email-note>span{display:block;font-size:10px;color:#a08069;margin-bottom:5px}
.avatar-email-note strong{font-size:12px;color:#805b46;font-weight:500;overflow-wrap:anywhere}
.gravatar-link{text-decoration:none}
.gravatar-preview-note{font-size:10px!important;line-height:1.7!important;margin:15px 0}
.profile-back{margin:0;min-height:34px}

/* One relationship picker shared by creation and later edits. */
.relation-picker,.relation-dropdown{position:relative}
.relation-select{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:12px 13px;border:1px solid #e4d1c7;border-radius:14px;background:#fffefa;color:#694638;text-align:left;font-size:13px}
.relation-select>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.relation-select[data-value=""]{color:#947b6e}
.relation-select svg{width:17px;height:17px;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .15s}
.relation-select[aria-expanded=true]{border-color:#c59686}
.relation-select[aria-expanded=true] svg{transform:rotate(180deg)}
.relation-options{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:5;overflow-y:auto;overscroll-behavior:contain;padding:6px;background:#fffcf9;border:1px solid #e8d4c8;border-radius:15px;box-shadow:0 12px 24px #724a3526;scrollbar-width:thin;scrollbar-color:#d8bcb0 transparent}
.relation-options.opens-up{top:auto;bottom:calc(100% + 7px)}
.relation-option{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:42px;padding:11px 12px;border:0;border-radius:10px;color:#71503f;background:transparent;text-align:left;font-size:12px;line-height:1.5}
.relation-option:hover,.relation-option:focus-visible{background:#f9eee5;outline-offset:-2px}
.relation-option[aria-selected=true]{background:#f5e8df;color:#8b5853}
.relation-check{opacity:0;color:#b57d77;flex:none}
.relation-option[aria-selected=true] .relation-check{opacity:1}
.relation-other{border-top:1px solid #eddfd5;margin-top:4px;border-radius:0 0 10px 10px;color:#a16d68}
.custom-relation{margin-top:14px}
.custom-relation label{font-size:10px;color:#9b7866}

/* Installed PWA: let the operating system provide the status bar. */
.pwa-install-intro{display:flex;align-items:center;gap:15px;margin:16px 0}.pwa-install-intro img{flex:none;border-radius:15px}.pwa-install-intro p{margin:0}
@media(display-mode:standalone){
 :root{background:var(--app-surface);color-scheme:only light}
 body{display:block;padding:0;min-height:100dvh;background:var(--app-surface);overscroll-behavior-y:none}
 .desk-note{display:none}
 .device{width:100%;max-width:600px;height:100dvh;min-height:0;border:0;border-radius:0;box-shadow:none;background-color:var(--app-surface);background-image:linear-gradient(180deg,var(--app-surface) 0,transparent 90px,transparent calc(100% - 90px),var(--app-surface) 100%),radial-gradient(ellipse 220px 250px at 87% 34%,#ffe8e698,transparent 90%),radial-gradient(ellipse 285px 230px at 6% 77%,#fcece8db,transparent 90%),linear-gradient(156deg,#fffefc 5%,#fff9f5 52%,#fdf1ed 100%)}
 .device:after{display:none}
 .screen{inset:env(safe-area-inset-top,0px) 0 0}
 /* The world stays full-bleed; only the header clears any real cutout. */
 #home{inset:0;padding-top:calc(env(safe-area-inset-top,0px) + 12px)}
 #home .home-top-glass{background:linear-gradient(180deg,var(--app-surface),#fef9f600 64px)}
 #home .home-bottom-glass{background:linear-gradient(0deg,var(--app-surface),#fef9f600 48px)}
 .inner{padding-bottom:max(34px,calc(env(safe-area-inset-bottom,0px) + 24px))}
}


/* Warm constellation: one circle token, including Me and fictional open places. */
#home .graph-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;z-index:1}
#home .graph-world .threads{inset:0;pointer-events:none;overflow:visible}
#home .graph-world .threads .own-connection{fill:none;stroke:url(#threadWarmth);stroke-width:1;opacity:.42;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none}
#home .graph-world .threads .peer-connection{fill:none;stroke:#bda697;stroke-width:.85;stroke-dasharray:2 5;stroke-linecap:round;opacity:.28}
#home .graph-viewport:before{background:radial-gradient(ellipse at 27% 43%,#fae1d34d,transparent 62%),radial-gradient(ellipse at 76% 68%,#e7e7d73b,transparent 65%);filter:none}
#home .graph-viewport:after{display:none}
#home .graph-world .person{position:absolute;right:auto;bottom:auto;width:112px;height:132px;min-height:0;padding:0;gap:8px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:none;border:0;color:var(--cocoa);z-index:3;touch-action:none}
#home .graph-world .person .halo{display:grid;place-items:center;width:var(--person-diameter);height:var(--person-diameter);flex:none;border:0;border-radius:50%;background:none;box-shadow:0 3px 8px #8c665712;transition:transform .18s ease,box-shadow .18s ease;animation:none}
#home .graph-world .person .avatar{width:100%;height:100%;font:500 46px/1 var(--serif);color:#8f6b5e;background:radial-gradient(circle at 30% 23%,#fffaf5 0%,#f8ece3 70%,#f1e2d7 100%);box-shadow:inset 0 0 0 1px #cda99a4d,inset 0 1px 2px #fffefbd9}
#home .graph-world .tone-1 .avatar{color:#896778;background:radial-gradient(circle at 30% 23%,#fffaf9 0%,#f3e9ed 70%,#eadddf 100%)}
#home .graph-world .tone-2 .avatar{color:#757c65;background:radial-gradient(circle at 30% 23%,#fffdf6 0%,#f0f0e5 70%,#e5e8d9 100%)}
#home .graph-world .tone-3 .avatar{color:#86715e;background:radial-gradient(circle at 30% 23%,#fffaf2 0%,#f5eddf 70%,#ecdfd1 100%)}
#home .graph-world .person .name-wrap{position:relative;display:block;width:var(--name-width,48px);max-width:48px;margin:0;transform:scale(var(--graph-label-scale,1));transform-origin:top center}
#home .graph-world .person .name{display:block;min-width:0;max-width:48px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:550 14px/1.3 var(--sans);color:#65483d;text-shadow:0 1px 5px #fffaf7;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#home .graph-world .person .relation-badge{position:absolute;display:block;left:calc(100% + 3px);right:auto;top:-10px;width:var(--relationship-width,98px);max-width:98px;margin:0;padding:2px 4px;border:1px solid #e8d9cd;border-radius:7px 7px 7px 2px;background:#fffaf3f0;box-shadow:0 1px 4px #a1776010;color:#84695a;font:500 10px/1.3 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#home .graph-world .person[data-label-side="left"] .relation-badge{left:auto;right:calc(100% + 3px);border-radius:7px 7px 2px 7px}
#home .graph-world .person .relation-badge.special{color:#8a672c;border-color:#dec794;background:linear-gradient(120deg,#fffbee,#f5e8ca);box-shadow:0 2px 6px #b1904920}
#home .graph-world .person .relation-badge.special:before{content:'✧';display:inline;margin-right:2px;font-size:10px;color:#aa8139}
#home .graph-world .person.me{--relationship-width:70px}
#home .graph-world .person.me .avatar{color:#8b715b;background:radial-gradient(circle at 30% 23%,#fffdf6 0%,#f5eedf 70%,#eee3d0 100%)}
#home .graph-world .person:hover .halo{transform:translateY(-1px);box-shadow:0 7px 16px #8c665724}
#home .graph-world .person:active .halo{transform:scale(.97)}
#home .graph-world .graph-placeholder .halo{box-shadow:none}
#home .graph-world .graph-placeholder .avatar{background:radial-gradient(circle at 30% 23%,#fffdf65c,#eddfcf30);box-shadow:inset 0 0 0 1px #cfbba46b;outline:1px dashed #c9b49b4d;outline-offset:-5px;color:#b79c81}
#home .placeholder-symbol{font:300 27px/1 var(--sans);opacity:.75}
#home .graph-world .graph-placeholder:hover .halo{box-shadow:0 4px 12px #aa85621a}




#home .graph-footer{bottom:148px;left:24px;width:calc(100% - 48px)}
#home .graph-instruction{font-size:9px;color:#887064;letter-spacing:.05px}

/* Temporary approved logo visual: no IP character rendering/animation is implied. */
#home .dock{position:absolute;left:16px;right:16px;bottom:max(26px,calc(env(safe-area-inset-bottom,0px) + 16px));z-index:10;display:grid;grid-template-columns:32px minmax(0,1fr) var(--expression-width);align-items:center;gap:7px;min-height:108px;margin:0;padding:9px 10px 9px 12px;border:1px solid #fffdf9cc;border-radius:999px;background:#fffdf9c2;box-shadow:0 9px 24px #88695a0d,inset 0 1px 0 #ffffff99;overflow:hidden;isolation:isolate;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:companion-enter .35s ease both}
#home .companion-atmosphere{position:absolute;inset:0 calc(var(--expression-width) + 20px) 0 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 14% 56%,#f7ded35c 0%,#fff0db66 30%,#fff4e52e 57%,transparent 82%);mask-image:linear-gradient(90deg,#000 0%,#000 28%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 28%,transparent 100%)}
#home .companion-mascot{width:32px;display:grid;place-items:center;pointer-events:none}
#home .companion-mascot img{display:block;width:36px;max-width:none;height:auto;object-fit:contain}
#home .dock-copy{position:relative;min-width:0;z-index:1;text-shadow:none}
#home .dock-kicker{display:block;margin:0 0 3px;color:#886a5f;font:500 7.5px/1.4 var(--sans);letter-spacing:1px}
#home .dock h2{margin:0;color:#694435;font:500 20.5px/1.06 var(--serif);letter-spacing:-.35px;text-wrap:balance}
#home .dock p{margin:4px 0 0;color:#80695e;font:400 9.5px/1.45 var(--sans);text-wrap:pretty}
html[lang^=zh] #home .dock h2{font:500 16px/1.4 var(--emotional);letter-spacing:0}
html[lang^=zh] #home .dock p{font-size:10px;line-height:1.6}
html[lang^=zh] #home .dock-kicker{font-size:8px;letter-spacing:.6px}
@keyframes companion-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* One signature expression action. Both instances consume these exact rules. */
:root{--expression-width:122px;--expression-height:44px}
.expression-button{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:5px;width:var(--expression-width);height:var(--expression-height);min-height:44px;padding:0 8px;border:1px solid #ddc3b3;border-radius:999px;background:linear-gradient(135deg,#fff7ed,#f4e6dc);box-shadow:0 2px 6px #95695012;color:#784b38;font:500 10.5px/1 var(--sans);letter-spacing:-.12px;white-space:nowrap;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;touch-action:manipulation}
.expression-button .expression-icon{width:15px;height:18px;flex:none}
.expression-button span{display:block;white-space:nowrap}
.expression-button:hover{transform:translateY(-1px);border-color:#c89e8c;box-shadow:0 3px 8px #95695020}
.expression-button:active{transform:scale(.98);box-shadow:0 2px 6px #9569501a}
.expression-button:focus-visible{outline:3px solid #bd7480;outline-offset:4px}
.space-write{position:absolute;right:24px;bottom:max(28px,calc(env(safe-area-inset-bottom,0px) + 20px));z-index:13}
@media(max-width:370px){
 #home .dock{left:12px;right:12px;grid-template-columns:30px minmax(0,1fr) var(--expression-width);gap:6px;padding:9px 9px 9px 10px}
 #home .companion-mascot{width:30px}#home .companion-mascot img{width:34px}
 #home .dock h2{font-size:20px}#home .graph-footer{left:18px}.space-write{right:20px}
}
@media(max-width:330px){:root{--expression-width:120px}.expression-button{font-size:10px;padding:0 7px;gap:4px}#home .dock{grid-template-columns:28px minmax(0,1fr) var(--expression-width);gap:5px;padding-left:10px}#home .companion-mascot{width:28px}#home .companion-mascot img{width:32px}#home .dock h2{font-size:19px}}
@media(prefers-reduced-motion:reduce){#home .dock{animation:none}#home .graph-world .person .halo,.expression-button{transition:none}#home .graph-world .person:hover .halo,.expression-button:hover{transform:none}}

/* Homepage graph only: dual core, interaction-ranked planets and virtual invitations. */
#home .relationship-galaxy .galaxy-node{width:max(var(--planet-size),calc(44px * var(--graph-hit-scale,1)));height:max(var(--planet-size),calc(44px * var(--graph-hit-scale,1)));display:grid;place-items:center;gap:0;justify-content:center;z-index:3}
#home .relationship-galaxy .galaxy-node .halo{position:relative;width:var(--planet-size);height:var(--planet-size);border:2px solid #fffaf5;border-radius:50%;background:#fffaf5;box-shadow:0 4px 13px #9c766e1c,0 0 0 1px #d6b8a226}
#home .relationship-galaxy .galaxy-node .avatar{font-size:calc(var(--planet-size) * .48)}
#home .relationship-galaxy .galaxy-node .name-wrap{position:absolute;top:calc(50% + var(--planet-size) / 2 + 8px);left:50%;width:var(--name-width,48px);transform:translateX(-50%) scale(var(--graph-label-scale,1));transform-origin:top center}
#home .relationship-galaxy .galaxy-self .halo,#home .relationship-galaxy .galaxy-partner .halo{border-width:3px;box-shadow:0 5px 17px #b88c7926,0 0 0 5px #fff7ef70,0 0 0 6px #d8bba22b}
#home .relationship-galaxy .galaxy-planet .halo{box-shadow:0 3px 10px #987c711c,0 0 0 3px #fff9f15c}
#home .relationship-galaxy .threads .galaxy-core-orbit{fill:#fff9ef16;stroke:#d5b395;stroke-width:.65;opacity:.24}
#home .relationship-galaxy .threads .galaxy-orbit{fill:none;stroke:#c5a99b;stroke-width:.8;opacity:.48}
#home .relationship-galaxy .threads .galaxy-reserved-orbit{fill:none;stroke:#d1b9ac;stroke-width:.7;opacity:.3}
#home .relationship-galaxy .galaxy-core-label{position:absolute;z-index:5;max-width:calc(80px / var(--graph-label-scale,1));left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--graph-label-scale,1));padding:3px 5px;border:1px solid #e0caa6;border-radius:99px;background:#fff9ec;color:#967348;box-shadow:0 2px 8px #b4925b12;font:500 11px/1.3 var(--sans);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;pointer-events:none}
#home .relationship-galaxy .galaxy-core-label>span{color:#b49359}
#home .relationship-galaxy .galaxy-add{z-index:3;--invitation-paper:color-mix(in srgb,var(--paper) 55%,var(--cream));--invitation-ink:color-mix(in srgb,var(--muted) 72%,var(--cream))}
#home .relationship-galaxy .galaxy-add.invitation-1{--invitation-paper:color-mix(in srgb,var(--paper) 30%,var(--cream));--invitation-ink:color-mix(in srgb,var(--rose-dark) 55%,var(--paper))}
#home .relationship-galaxy .galaxy-add.invitation-2{--invitation-paper:color-mix(in srgb,var(--paper) 96%,var(--cocoa));--invitation-ink:color-mix(in srgb,var(--muted) 70%,var(--paper))}
#home .relationship-galaxy .galaxy-add .halo{border:1px solid #e7dcd380;background:var(--invitation-paper);box-shadow:inset 0 1px 5px #fffdf9b3,0 2px 8px #9c766e0a}
#home .relationship-galaxy .galaxy-add .avatar{display:grid;place-items:center;background:radial-gradient(circle at 32% 24%,#fffdf9c4,transparent 75%);color:var(--invitation-ink)}
#home .relationship-galaxy .galaxy-invitation{width:37px;height:37px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
#home .relationship-galaxy .care-heart{opacity:.78}
#home .relationship-galaxy .care-plus{opacity:.68;stroke-width:1}
#home .relationship-galaxy .galaxy-add:hover .halo,#home .relationship-galaxy .galaxy-add:focus-visible .halo{border-color:#ccb5a5;box-shadow:inset 0 1px 5px #fffdf9,0 2px 9px #9c766e16}
#home .relationship-galaxy .galaxy-add:active .halo{background:#f3e6df}

/* Compact paired core: captions stay outside the two near-touching portraits. */
#home .relationship-galaxy .galaxy-self[data-core-caption="above"] .name-wrap,#home .relationship-galaxy .galaxy-partner[data-core-caption="above"] .name-wrap{top:auto;bottom:calc(50% + var(--planet-size) / 2 + 8px);transform-origin:bottom center}

/* All names/ordinary labels follow preferences; the core bridge is independent. */
#home .relationship-galaxy[data-show-names="false"] .name{display:none}
#home .relationship-galaxy[data-show-relations="false"] .relation-badge{display:none}
#home .relationship-galaxy[data-show-names="false"][data-show-relations="true"] .name-wrap .relation-badge{position:relative;left:auto;right:auto;top:0;margin-left:calc((var(--name-width,48px) - var(--relationship-width,72px)) / 2)}
#home .graph-settings{position:absolute;right:0;top:calc(100% + 10px);width:44px;height:44px;padding:0;border:0;background:none;color:#997e6c;display:grid;place-items:center;cursor:pointer;z-index:13}
#home .graph-settings:before{content:'';position:absolute;inset:6px;border:1px solid #e4d8cd;border-radius:50%;background:#fffaf4c2}
#home .graph-settings svg{position:relative;width:16px;height:16px}
#home .graph-settings:hover:before{border-color:#cdb6a2;background:#fffaf4}
.graph-display-options{margin:18px 0 8px}
.graph-display-option{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:58px;font:500 12px/1.5 var(--sans);color:var(--cocoa);border-bottom:1px solid #eee2d8;cursor:pointer}
.graph-display-option:last-child{border-bottom:0}
.graph-display-option input{position:relative;appearance:none;-webkit-appearance:none;flex:none;width:38px;height:24px;margin:0;border:1px solid #d9c8b9;border-radius:99px;background:#e9ded3;cursor:pointer}
.graph-display-option input:after{content:'';position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fffdf9;box-shadow:0 1px 4px #7f604725;transition:transform .15s ease}
.graph-display-option input:checked{background:#bc8f87;border-color:#b58a7f}
.graph-display-option input:checked:after{transform:translateX(14px)}
.graph-display-option input:focus-visible{outline:2px solid #bd8c7c;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.graph-display-option input:after{transition:none}}

/* One mobile-width pricing module in the existing Membership sheet. */
.membership-sheet{max-height:94%;padding:12px 20px max(22px,env(safe-area-inset-bottom,0px))}
.membership-sheet h2{font-size:26px;margin:3px 0}
.membership-sheet #membershipCurrent{margin:4px 0 8px;font-size:11px}
.pricing-module{display:flex;flex-direction:column;gap:9px;width:100%;max-width:390px;margin:8px auto 0;color:var(--cocoa)}
.pricing-plan{padding:12px 14px;border:1px solid #e8d9cc;border-radius:18px;background:#fffdfb;min-width:0}
.pricing-plan.pricing-annual{border:2px solid #d8adb2;background:linear-gradient(145deg,#fffaf5,#fbeeed);box-shadow:0 5px 20px #9d59660d}
.pricing-badge{display:inline-block;border-radius:99px;padding:3px 8px;background:#f5e3e5;color:#734c53;font:600 10px/1.4 var(--sans);letter-spacing:.3px}
.pricing-annual .pricing-badge{background:#e2efdf;color:#285b35}
.pricing-plan h3{display:inline;font:500 22px/1.3 var(--serif);margin:0 0 0 7px;color:var(--cocoa)}
.sheet .pricing-plan p{font-size:12px;line-height:1.4;margin:5px 0;color:#795c4f;overflow-wrap:anywhere}
.sheet .pricing-plan .pricing-price{color:var(--cocoa);margin:5px 0}.pricing-price strong{font:500 32px/1.2 var(--sans);letter-spacing:-1px}.pricing-price span{font-size:13px;white-space:nowrap}
.sheet .pricing-plan .pricing-billing{font-weight:600;color:var(--cocoa)}
.pricing-plan .btn{min-height:44px;margin-top:5px;padding:9px 12px;font-size:13px}.pricing-plan .pricing-primary{background:var(--cocoa);border-color:var(--cocoa);color:#fffaf7}.pricing-plan .pricing-secondary{background:#fff8f5;border-color:#c5a198;color:var(--cocoa)}
.sheet .pricing-plan .pricing-disclosure{font-size:11px;line-height:1.4;margin:6px 0 0}.sheet #pricingResult{margin:0;font-size:13px;color:var(--cocoa)}

/* Founder preview repair: guest content and secondary safety management. */
.guest-screen .inner{padding-top:24px}.guest-screen .signed-out-brand{margin-bottom:32px}
.guest-screen .paper-card{margin-top:24px}.guest-screen time{font-size:11px;color:var(--muted)}
.blocked-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.blocked-row span{overflow-wrap:anywhere;min-width:0;font-size:12px}
#replyForm{margin-top:18px}#replyList{margin-top:12px}#replyStatus{min-height:1.7em}
a:focus-visible{outline:3px solid #bd7480;outline-offset:3px}

/* One app-level brand header; screens scroll in the space reserved below it. */
.device{--brand-height:70px}
.app-header{position:absolute;inset:0 0 auto;min-height:calc(var(--brand-height) + env(safe-area-inset-top,0px));padding:12px 24px 12px;padding-top:calc(12px + env(safe-area-inset-top,0px));z-index:16;background:transparent;padding-left:calc(24px + env(safe-area-inset-left,0px));padding-right:calc(24px + env(safe-area-inset-right,0px))}
.screen:not(#home){top:calc(var(--brand-height) + env(safe-area-inset-top,0px))}
#home .home-heading{padding-top:46px}

/* Brand navigation reuses the approved artwork and existing client routing. */
button.top-brand{border:0;padding:0;background:transparent;text-align:left}
#space[data-needs-label="true"] .space-tabs,#space[data-needs-label="true"] .space-panel,#space[data-needs-label="true"] #editRelation{display:none}

/* Shared Gravatar rendering preserves the approved initial underneath on failure. */
.avatar:has(>.gravatar-avatar),.person-portrait:has(>.gravatar-avatar),.small-avatar:has(>.gravatar-avatar){position:relative}
.gravatar-avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}

/* Dense tracks keep their captions in two legible, non-overlapping columns. */
#home .relationship-galaxy .galaxy-planet .name-wrap{left:calc(50% + var(--caption-x,0px));top:calc(50% + var(--caption-y,60px));width:60px;transform:translate(-50%,-50%) scale(var(--graph-label-scale,1));transform-origin:center;text-align:center}
#home .relationship-galaxy .galaxy-planet .name{max-width:60px;margin:auto;font:550 14px/1.2 var(--sans)}
#home .relationship-galaxy .galaxy-node.galaxy-planet .name-wrap .relation-badge{position:relative;display:block;left:auto;right:auto;top:auto;max-width:60px;margin:2px auto 0;padding:2px 4px;font:500 9px/1.2 var(--sans);overflow:hidden;text-overflow:ellipsis}
#home .relationship-galaxy[data-show-relations="false"] .galaxy-node.galaxy-planet .name-wrap .relation-badge{display:none}
#home .relationship-galaxy .galaxy-caption-leader{position:absolute;left:calc(50% + var(--caption-lineX,0px));top:calc(50% + var(--caption-lineY,0px));width:var(--caption-length,0px);height:1px;transform:rotate(var(--caption-angle,0deg));transform-origin:left center;background:#c8ada035;pointer-events:none;z-index:-1}
#home .relationship-galaxy[data-show-names="false"][data-show-relations="false"] .galaxy-caption-leader{visibility:hidden}

/* Approved private-photo composer delta. Artwork and brand tokens are preserved. */
.selected-recipient{padding:9px 12px;gap:9px;margin-bottom:14px;border-radius:13px;min-height:52px}.selected-recipient strong{font-size:13px;max-width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selected-recipient .choice-circle{width:30px;height:30px;font-size:19px}.selected-recipient .eyebrow{font-size:8px;letter-spacing:.08em}.selected-recipient .relation-badge{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editor-surface{height:140px;min-height:130px;padding:12px;outline:none}.rich-editor:focus-within{border-color:#b27b80;box-shadow:0 0 0 2px #b27b802e}.editor-surface:focus-visible{outline:2px solid #a96e78;outline-offset:-4px;border-radius:12px}
.image-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}.photo-tile,.photo-add{aspect-ratio:1;min-width:0;position:relative;overflow:hidden;border:1px solid #e5cec4;border-radius:10px;background:#fffaf6}.photo-tile>img{width:100%;height:100%;object-fit:cover}.photo-add{display:flex;align-items:center;justify-content:center;flex-direction:column;color:#986770;gap:2px;cursor:pointer}.photo-add>span{font-size:29px;line-height:1}.photo-add small{font-size:10px}.photo-tile button{border:0;background:#fffaf6ed;color:#633f36;min-height:25px;min-width:25px;border-radius:5px}.photo-remove{position:absolute;top:3px;right:3px;font-size:19px}.image-grid .photo-tile{touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}.image-grid.sorting{user-select:none}.sorting .photo-lifted{opacity:.25}.photo-ghost{position:fixed;z-index:9999;pointer-events:none;box-shadow:0 12px 30px #4c302850;transform:scale(1.06)}.photo-upload{position:absolute;left:2px;right:2px;bottom:2px;font-size:9px;background:#fffaf6ed;color:#633f36;text-align:center;overflow:hidden;white-space:nowrap}.photo-position:focus{clip:auto;width:100%;height:44px;left:0;bottom:0;z-index:2}.draft-conflict{padding:10px;border:1px solid #a96e78;border-radius:8px}.draft-conflict[hidden]{display:none}.photo-retry{position:absolute;top:40%;left:12%;right:12%;font-size:10px}.photo-composer p{margin:5px 0;line-height:1.6}.photo-composer .smallhint{white-space:normal}.post-images{display:grid;gap:6px;margin:12px 0}.timeline-images{grid-template-columns:repeat(5,minmax(0,1fr));width:min(100%,310px)}.timeline-photo{aspect-ratio:1;position:relative;overflow:hidden;border-radius:6px;background:#f6e9e1}.timeline-photo img{display:block;width:100%;height:100%;object-fit:cover}.photo-more{position:absolute;inset:0;display:grid;place-items:center;background:#4c302878;color:white;font-size:15px}.detail-images{grid-template-columns:repeat(3,minmax(0,1fr))}.detail-photo{display:block;padding:0;border:0;background:#fffaf6;border-radius:8px;overflow:hidden;cursor:zoom-in;width:100%;min-width:0;aspect-ratio:1}.detail-photo img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover}.detail-photo:focus-visible,.photo-tile:focus-visible,.photo-tile button:focus-visible,.photo-add:focus-visible{outline:2px solid #a96e78;outline-offset:-3px}
#imageViewer{box-sizing:border-box;width:min(96vw,1100px);max-width:96vw;height:94dvh;max-height:94dvh;border:1px solid #d4b6a8;border-radius:16px;background:#fffaf6;color:#633f36;padding:12px;overflow:hidden}#imageViewer[open]{display:flex;flex-direction:column;gap:8px}#imageViewer::backdrop{background:#37241ed9}.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;font-size:12px}.viewer-toolbar button,.viewer-toolbar a{min-height:44px;background:#fffaf6;border:1px solid #d4b6a8;border-radius:8px;padding:7px;color:#633f36;font-size:12px}.viewer-toolbar a[hidden]{display:none}#viewerScroll{overflow:auto;flex:1;min-height:0;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior:contain}#viewerImage{display:block;width:100%;height:auto;max-height:none;max-width:none}#imageViewer.zoomed #viewerImage{width:200%}#viewerStatus{font-size:11px;margin:0}

/* Fixed cells retain their geometry through loading, retry and failure. */
.photo-cell{position:relative;display:block;min-width:0;aspect-ratio:1}.post-images img[data-photo-state="loading"],.post-images img[data-photo-state="failed"],.photo-tile img[data-photo-state="loading"],.photo-tile img[data-photo-state="failed"],#viewerImage[data-photo-state="loading"],#viewerImage[data-photo-state="failed"]{opacity:0}.photo-load-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:3px;background:#fffaf6;font:10px/1.3 var(--sans);text-align:center;overflow:hidden}.photo-load-error button{border:0;background:transparent;color:#774b52;text-decoration:underline;min-height:32px;padding:2px 4px;font:inherit;cursor:pointer}.moment-open{margin-left:auto;border:0;background:transparent;padding:0;cursor:pointer}.moment-open:focus-visible,.photo-load-error button:focus-visible{outline:2px solid #a96e78;outline-offset:-2px}#viewerStatus .photo-load-error{position:static;flex-direction:row}
.photo-tile .photo-remove{z-index:2}.timeline-photo .photo-load-error button{width:100%;height:100%}

/* Private avatar editor, within the existing Account sheet and palette. */
.avatar-current{display:flex;align-items:center;gap:16px;margin:12px 0}.avatar-current .small-avatar{position:relative;overflow:hidden;width:68px;height:68px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--cocoa);font:36px var(--serif)}
.avatar-crop{width:min(100%,260px);aspect-ratio:1;margin:12px auto;border-radius:50%;overflow:hidden;touch-action:none;cursor:grab;outline:2px solid var(--rose-dark);background:white}.avatar-crop:active{cursor:grabbing}.avatar-crop canvas{width:100%;height:100%;display:block}.avatar-zoom{margin:18px 0}.avatar-zoom input{width:100%;min-height:44px;accent-color:var(--rose-dark)}

/* Founder-approved compact timeline and visible publication gate. */
.timeline{margin-left:18px;padding-left:25px}
.timeline .moment:before{display:none}
.timeline .moment{padding:12px 14px;margin-bottom:12px}
.moment-avatar{position:absolute;left:-44px;top:10px;width:34px;height:34px;display:grid;place-items:center;overflow:hidden;border-radius:50%;border:2px solid #fff9f5;background:#f1ded3;color:#6e4636;font:500 15px var(--sans)}
.moment-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.memories .moment-avatar{position:relative;left:auto;top:auto;margin-bottom:6px}
.moment blockquote{margin:0 0 8px}
.moment-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:10px}
.moment-footer .moment-open{margin:0;min-height:44px;padding:8px 0;font-size:11px}
.moment-footer time{font-variant-numeric:tabular-nums}
#minimumProgress{padding:12px;border:1px solid #c99d8d;border-radius:10px;background:#fff7ef;color:#694639;font-size:12px;line-height:1.6;margin:12px 0 8px}
#minimumProgress[data-ready=true]{border-color:#d8d0b8;background:#faf9ef}
#reviewShare:disabled{opacity:1;background:#eee2dc;color:#806c63;border-color:#d8c5bc;box-shadow:none;cursor:not-allowed}
#spaceDescription{white-space:pre-wrap;overflow-wrap:anywhere}
#deleteMoment{min-height:44px}

.space-avatar-pair{height:calc(var(--portrait-size)*1.67)}
.spacehead .portrait-self{top:0;z-index:1}
.spacehead .portrait-other{top:calc(var(--portrait-size)*.67);z-index:2}
.spacehead .space-avatar-pair > .person-portrait{position:absolute}
/* Space UI: full-bleed tabs, and half-sized outer gutters for Moments. */
#space .space-tabs{margin-inline:-25px;width:calc(100% + 50px)}
#space #spacePanelMoments{margin-left:-22px;margin-right:-13px}
@media(max-width:360px){
  #space .space-tabs{margin-inline:-21px;width:calc(100% + 42px)}
  #space #spacePanelMoments{margin-left:-18px;margin-right:-9px}
}

/* Owner-specific space identity. Portrait pair and galaxy geometry stay intact. */
.space-pair-names{min-width:0;line-height:1.7;overflow-wrap:anywhere}
.space-pair-names h1{display:inline;margin:0;font:500 14px/1.7 var(--sans);color:var(--cocoa)}
.space-pair-names .relation-badge{position:static;margin-left:6px;vertical-align:middle;white-space:normal}
.space-identity-heading #editRelation{width:35px;min-width:35px;padding:8px;display:grid;place-items:center}
#editRelation svg{width:19px;height:19px}
#personalSpaceName{font-size:28px;line-height:1.25;margin:5px 0 7px;overflow-wrap:anywhere}
.spacehead .space-description{white-space:pre-wrap;overflow-wrap:anywhere}

/* Space Themes V2: public palette and original artwork live above the header. */
html[data-space-style]{--space-bg:#faf7f0;--space-glow:#e8dcc7;--space-surface:#fffdf9;--space-tint:#f6eee2;--space-border:#e5d8c7;--space-accent:#765c46;--space-ink:#503a2b;--space-muted:#80705f;--space-shadow:#87684714;--space-art:url('assets/space-classic.svg');--space-title:var(--serif);--space-title-style:normal;--status-ink:#503a2b}
html[data-space-style=romantic]{--space-bg:#fff6f3;--space-glow:#f2d1d6;--space-surface:#fffcf9;--space-tint:#fcefeb;--space-border:#efd7d3;--space-accent:#a45067;--space-ink:#60372f;--space-muted:#89635f;--space-shadow:#a6677814;--space-art:url('assets/space-romantic.svg');--space-title-style:italic;--status-ink:#60372f}
html[data-space-style=growth]{--space-bg:#fcfbf0;--space-glow:#ede6b9;--space-surface:#fffef8;--space-tint:#f4f3df;--space-border:#e1e2ca;--space-accent:#607446;--space-ink:#4d4a30;--space-muted:#75765e;--space-shadow:#7f875514;--space-art:url('assets/space-growth.svg');--status-ink:#414c32}
html[data-space-style=familyMemories]{--space-bg:#fcf6ec;--space-glow:#e9d5b8;--space-surface:#fffdf7;--space-tint:#f6ebdc;--space-border:#e7d4bd;--space-accent:#94603f;--space-ink:#5b3b28;--space-muted:#88705b;--space-shadow:#92704a14;--space-art:url('assets/space-family-memories.svg');--status-ink:#5b3b28}
html[data-space-style=siblings]{--space-bg:#fff7ed;--space-glow:#f6d7b2;--space-surface:#fffdf8;--space-tint:#fff0df;--space-border:#eed7bd;--space-accent:#b56437;--space-ink:#613d26;--space-muted:#8a6c57;--space-shadow:#b7805014;--space-art:url('assets/space-siblings.svg');--space-title:var(--emotional);--status-ink:#613d26}
html[data-space-style=friendship]{--space-bg:#f3f8ff;--space-glow:#d4e5fa;--space-surface:#fcfdff;--space-tint:#edf4fd;--space-border:#d8e4f4;--space-accent:#536fa8;--space-ink:#354b72;--space-muted:#697d9a;--space-shadow:#607c9e14;--space-art:url('assets/space-friendship.svg');--status-ink:#354b72}
html[data-space-style] .device{background-color:var(--space-bg);background-image:linear-gradient(to bottom,var(--space-bg) 0,var(--space-bg) env(safe-area-inset-top,0px),transparent calc(env(safe-area-inset-top,0px) + 76px)),var(--space-art),radial-gradient(ellipse at 88% 18%,var(--space-glow),transparent 56%),repeating-linear-gradient(105deg,#b9a48b03 0 1px,transparent 1px 4px);background-repeat:no-repeat,no-repeat,no-repeat,repeat;background-size:100% 100%,100% auto,100% 570px,auto;background-position:top center;transition:none}
html[data-space-style] #space,html[data-space-style] #detail{--cocoa:var(--space-ink);--ink:var(--space-ink);--muted:var(--space-muted);--border:var(--space-border);--card:var(--space-surface);color:var(--space-ink);background:transparent;animation:none}
html[data-space-style] .language-control{color:var(--space-ink);background:#ffffff38;border-color:color-mix(in srgb,var(--space-accent) 25%,transparent)}
html[data-space-style] .language-control:hover{background:#ffffff60}
#detail .detail-card{padding:4px 0 20px;margin-bottom:13px;background:transparent;border:0;border-radius:0;box-shadow:none;overflow-wrap:anywhere}
#detail .moment-head{gap:10px 16px;align-items:center;color:var(--space-muted)}
#detail .detail-author{display:flex;align-items:center;gap:9px;min-width:0}
#detail #detailAuthor{font-size:13px;color:var(--space-ink);overflow-wrap:anywhere;min-width:0}
#detail .detail-avatar{position:relative;display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--space-tint);color:var(--space-accent);border:1px solid var(--space-border);font:500 19px var(--serif)}
#detail #detailDate{font-size:10px;line-height:1.6}
#detail #detailBody{color:var(--space-ink)}
#app[data-booting] :is(.screen,.app-header,.local-sync-status){visibility:hidden}
/* iOS translucent standalone bars use white glyphs. Only the system-safe inset
   receives a dark, theme-derived wash, fading to transparent at its lower edge.
   Never extend this wash below the safe area into the Space artwork. */
@supports (-webkit-touch-callout:none){@media(display-mode:standalone){.device:before{content:'';position:absolute;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:linear-gradient(var(--status-ink,#592810) 75%,var(--space-bg,var(--app-surface)));z-index:17;pointer-events:none}}}
@supports (-webkit-touch-callout:none){@media(display-mode:standalone){html[data-space-style] .device:before{height:env(safe-area-inset-top,0px);background:linear-gradient(to bottom,var(--status-ink) 0,var(--status-ink) calc(env(safe-area-inset-top,0px) * .7),transparent 100%)}}}
#space .spacehead{position:relative;isolation:isolate;overflow:auto;max-height:44%;min-height:154px;align-items:center;margin:0 -4px 16px;padding:8px 0 16px;gap:18px;scrollbar-width:thin}
#space .space-avatar-pair{--portrait-size:78px;align-self:flex-start;margin-top:5px}
#space .spacehead .person-portrait{border-width:4px;box-shadow:0 6px 20px var(--space-shadow),0 0 0 1px #ffffff80}
#space .space-identity{position:relative;flex:1;min-width:0;padding:3px 12px 8px 0}
#space .space-pair-names{max-width:100%;line-height:1.7}
#space .space-pair-names h1{font:500 11px/1.7 var(--sans);letter-spacing:.035em;color:var(--space-muted)}
#space .space-pair-names .relation-badge{font-size:9px;margin:0 0 0 5px;border-radius:10px 10px 10px 3px;padding:3px 6px}
#space #personalSpaceName{font:600 38px/1.03 var(--space-title);font-style:var(--space-title-style);letter-spacing:-.6px;margin:10px 0 10px;max-width:100%;text-wrap:balance;color:var(--space-ink)}
html[lang^=zh] #space #personalSpaceName{font:500 29px/1.3 var(--emotional);letter-spacing:.04em}
#space .spacehead .space-description{font:400 12px/1.8 var(--sans);max-width:100%;color:var(--space-muted);white-space:pre-wrap;overflow-wrap:anywhere}
#space .space-tabs{border-color:var(--space-border);background:linear-gradient(0deg,var(--space-bg),transparent);}
#space .space-tabs:after{width:calc((100% - 16px)/3);background:var(--space-accent)}
#space .space-tabs[data-active=info]:after{transform:translateX(calc(200% + 16px))}
#space .space-tab{color:var(--space-muted)}
#space .space-tab[aria-selected=true],#space .space-tab:hover{color:var(--space-accent);background:linear-gradient(0deg,var(--space-tint),transparent)}
#space .space-panel{background:linear-gradient(180deg,transparent,var(--space-bg) 95px)}
#space :is(.moment,.memories,.anniversary-card,.space-information){background:var(--space-surface);border:1px solid var(--space-border);box-shadow:0 5px 18px var(--space-shadow)}
#space .moment{border-radius:20px;margin-bottom:14px;padding:17px 15px 10px}
#space .moment.mine{background:color-mix(in srgb,var(--space-tint) 36%,var(--space-surface))}
#space .moment blockquote{font:400 17px/1.85 var(--emotional);-webkit-line-clamp:6;overflow-wrap:anywhere}
#space .timeline{border-color:var(--space-border)}
#space :is(.moment-avatar,.relation-badge){background:var(--space-tint);border-color:var(--space-border);color:var(--space-accent);box-shadow:0 2px 9px var(--space-shadow)}
#space :is(.moment blockquote,.anniversary-heading h2,.date-copy strong,.space-information h2){color:var(--space-ink)}
#space :is(.space-description,.smallhint,.sectionlabel,.sort-note,.moment time,.date-copy small,.date-distance,.date-empty,.anniversary-heading span,.date-group-heading,.previewonly){color:var(--space-muted)}
#space :is(.btn,.calendar-add){color:var(--space-accent);background:var(--space-tint);border-color:var(--space-border);min-height:44px}
#space .calendar-add{min-width:44px}
#space :is(.textbutton,.moment-open,.date-symbol,.date-chevron){color:var(--space-accent)}
#space :focus-visible,.local-new-moments:focus-visible{outline-color:var(--space-accent)}
#spaceWrite{background:var(--space-accent);color:#fff;border-color:var(--space-accent);box-shadow:0 5px 18px var(--space-shadow)}
#space .space-information{border-radius:20px;padding:18px}
.space-information-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.space-information h2{font:500 23px/1.4 var(--serif);margin:0}
html[lang^=zh] .space-information h2{font:500 19px/1.5 var(--sans)}
.space-information dl{margin:16px 0 0}
.space-information dl>div{padding:16px 0;border-top:1px solid var(--space-border)}
.space-information dt{font-size:11px;color:var(--space-muted);margin-bottom:7px}
.space-information dd{margin:0;font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
#space #spacePanelInfo:after{height:max(30px,env(safe-area-inset-bottom,0px))}
.local-sync-status{position:absolute;z-index:14;top:calc(env(safe-area-inset-top,0px) + 64px);right:25px;max-width:80%;margin:0;font-size:10px;color:var(--space-muted,var(--muted));pointer-events:none}
.local-sync-status:empty{display:none}
/* This sibling of .screen is anchored to the app viewport, never its timeline. */
.local-new-moments{position:absolute;z-index:14;bottom:calc(env(safe-area-inset-bottom,0px) + 82px);left:50%;transform:translateX(-50%);max-width:calc(100% - 40px);min-height:44px;padding:10px 18px;border:1px solid var(--space-border);border-radius:999px;background:var(--space-surface);color:var(--space-accent);box-shadow:0 4px 20px var(--space-shadow),0 2px 6px #60473212;font:600 12px/1.4 var(--sans);overflow-wrap:anywhere;text-align:center;touch-action:manipulation}
#timeline{overflow-anchor:none}
@media(max-width:360px){#space .spacehead{gap:12px;min-height:137px}#space .space-avatar-pair{--portrait-size:66px}#space #personalSpaceName{font-size:32px}html[lang^=zh] #space #personalSpaceName{font-size:26px}#space .space-tab{gap:5px;font-size:11px}#space .space-identity{padding-right:0}#space .moment blockquote{font-size:16px}}
@media(max-height:600px){#space .spacehead{min-height:92px;max-height:38%;padding-top:0;padding-bottom:6px;margin-bottom:6px}#space .space-avatar-pair{--portrait-size:52px}#space #personalSpaceName{font-size:28px;margin:5px 0}html[lang^=zh] #space #personalSpaceName{font-size:23px}}

@media(max-width:549px),(display-mode:standalone){html[data-space-style]{background:var(--space-bg)}}

.unread-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border:2px solid #fff9f5;border-radius:999px;background:#b8463e;color:#fff;font:700 11px/1 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.unread-badge[hidden]{display:none}
.galaxy-node .halo{position:relative}
.galaxy-node .unread-badge{position:absolute;right:0;top:0;z-index:3;transform:translate(22%,-22%) scale(var(--graph-hit-scale,1));transform-origin:75% 25%}
.information-label{position:relative}
.information-label .unread-badge{position:absolute;right:-20px;top:-13px}
.new-activity{margin:0 0 22px}
.new-activity h2{font:500 21px/1.4 var(--serif);color:var(--space-ink);margin:0 0 12px}
.activity-card{display:block;width:100%;padding:14px 16px;margin:0 0 10px;text-align:start;border:1px solid var(--space-border);border-radius:16px;background:var(--space-surface);color:var(--space-ink);box-shadow:0 4px 14px var(--space-shadow);cursor:pointer}
.activity-card strong{font:600 12px/1.5 var(--sans);color:var(--space-accent)}
.activity-excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:8px 0;font:400 15px/1.7 var(--emotional);overflow-wrap:anywhere}
.activity-footer{display:flex;justify-content:space-between;gap:12px;font:400 10px/1.5 var(--sans);color:var(--space-muted)}
.new-reply{border-inline-start:3px solid var(--space-accent);background:var(--space-tint);scroll-margin-block:20px}

/* Account identity keeps the existing email and optional public ID together. */
.account-name-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 7px}
.account-name-line #accountName{font-size:19px;margin:0;min-width:0}
.account-name-line #accountId{font-size:10px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.account-name-copy #accountEmail{display:block;margin-top:5px;overflow-wrap:anywhere;line-height:1.6}
@media(max-width:360px){.account-identity{flex-wrap:wrap}.account-identity #editProfile{margin-left:auto}}

/* Shared external provenance stays beside publication time in every reading view. */
.publication-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0;max-width:100%}
.publication-meta time{overflow-wrap:anywhere}
#detailProvenance{display:contents}
.external-import-badge{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:28px;padding:4px 7px;border:1px solid var(--space-border,#e4d1c7);border-radius:99px;background:color-mix(in srgb,var(--space-tint,#f9eee9) 60%,transparent);color:var(--space-ink,#613b30);font:500 10px/1.4 var(--sans);text-align:left;vertical-align:middle}
.external-import-badge span{min-width:0;overflow-wrap:anywhere}
.external-import-badge svg{width:14px;height:14px;flex:none}
.external-import-badge:hover{background:color-mix(in srgb,var(--space-tint,#f9eee9) 85%,transparent)}
.external-import-badge:focus-visible{outline:2px solid var(--space-accent,#a45067);outline-offset:2px}