.friends-page{--space-4:4px;--space-8:8px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;--space-28:28px;--space-32:32px;--space-40:40px;--space-48:48px;--space-64:64px;--space-80:80px;--text-9:9px;--text-10:10px;--text-11:11px;--text-12:12px;--text-13:13px;--text-14:14px;--text-15:15px;--text-16:16px;--text-18:18px;--text-20:20px;--text-24:24px;--text-26:26px;--text-28:28px;--text-32:32px;--text-36:36px;--text-40:40px;--text-48:48px;--bg:#f7f8f0;--paper:#fffef8;--ink:#303b2c;--muted:#626d58;--rule:#dce1d1;--sage:#55714b;--wash:#e9eddc;--wood:#74523a;--cream:#f4e2b9;--gold:#d8ad59;--serif:"Songti SC","STSong",Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;--hand:"Kaiti SC","STKaiti",serif;--mono:"SFMono-Regular",Consolas,monospace;--ease:cubic-bezier(.2,.7,.2,1)}
.friends-page *{box-sizing:border-box}html:has(.friends-page){scroll-behavior:smooth;scroll-padding-top:24px}body:has(.friends-page){margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}.friends-page button,.friends-page input,.friends-page textarea{font:inherit}.friends-page button{cursor:pointer}.friends-page button:disabled{cursor:default}.friends-page a{color:inherit}.friends-page button:focus-visible,.friends-page a:focus-visible,.friends-page input:focus-visible,.friends-page textarea:focus-visible{outline:2px solid var(--sage);outline-offset:4px}.friends-page [hidden]{display:none!important}.friends-page .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.friends-page .sr-only:focus{position:fixed;inset:12px auto auto 12px;width:auto;height:auto;clip:auto;background:var(--paper);padding:var(--space-16,16px);z-index:100}.friends-page .page-wrap{max-width:1184px;margin:auto;padding:0 var(--space-40,40px)}.friends-page .site-nav{height:88px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-24,24px);border-bottom:1px solid var(--rule)}.friends-page .wordmark{font:italic var(--text-26,26px) Georgia,serif;text-decoration:none;letter-spacing:-1px}.friends-page .nav-links{display:flex;align-items:center;gap:var(--space-28,28px);font-size:var(--text-12,12px)}.friends-page .nav-links a{text-decoration:none;color:var(--muted);padding:var(--space-12,12px) 0}.friends-page .nav-links a:hover,.friends-page .nav-links a[aria-current]{color:var(--ink)}.friends-page .nav-links a[aria-current]{font-weight:600}.friends-page .nav-links .register-link{background:var(--wash);padding:10px var(--space-16,16px);border-radius:3px}.friends-page .tree-intro{display:flex;justify-content:space-between;align-items:end;gap:var(--space-32,32px);padding:var(--space-40,40px) 0 var(--space-8,8px)}.friends-page .tree-intro h1{font:400 var(--text-40,40px)/1.35 var(--serif);letter-spacing:3px;margin:0 0 var(--space-12,12px)}.friends-page .tree-intro p{font:var(--text-14,14px)/1.9 var(--sans);color:var(--muted);margin:0}.friends-page .intro-count{font:var(--text-11,11px)/1.8 var(--mono);text-align:right;color:var(--muted);flex-shrink:0}.friends-page .intro-count strong{font:var(--text-28,28px)/1.2 var(--serif);color:var(--sage);font-weight:400;display:block}.friends-page .tree-layout{display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:var(--space-28,28px);align-items:center;min-height:560px}.friends-page .tree-scene{position:relative;width:100%;aspect-ratio:600/420;isolation:isolate;margin:0}.friends-page .tree-art{position:absolute;left:15%;top:2.9%;width:85%;height:93.5%;object-fit:fill;image-rendering:pixelated;pointer-events:none;z-index:0}.friends-page .scene-ground{position:absolute;left:15%;right:8%;bottom:1%;height:9%;background:radial-gradient(ellipse,#bfcdaa48,transparent 70%);pointer-events:none;z-index:-1}.friends-page .bear-stage{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;z-index:2}.friends-page .bear-fallback{position:absolute;left:16.6667%;top:67.38095%;width:34.1667%;height:28.3333%;overflow:hidden;pointer-events:none;z-index:2}.friends-page .bear-fallback img{position:absolute;max-width:none;width:165.85366%;height:201.6807%;left:-9.7561%;top:-94.95798%;image-rendering:pixelated}.friends-page .tree-cord{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}.friends-page .tree-cord path{fill:none;stroke:#70523b;stroke-width:1.3;stroke-linecap:square}.friends-page .tree-cord .cord-end{fill:var(--cream);stroke:#48382d;stroke-width:1}.friends-page .bear-touch{position:absolute;left:35%;top:74%;width:14%;height:19%;z-index:5;border:0;background:transparent;border-radius:40%;cursor:pointer}.friends-page .bear-touch:hover{background:#f4e2b91a}.friends-page .bear-touch:focus-visible{outline-offset:0}.friends-page .bear-speech{position:absolute;left:13%;top:71%;z-index:7;max-width:132px;padding:10px var(--space-12,12px);background:var(--paper);box-shadow:0 2px 8px #303b2c15;font:var(--text-12,12px)/1.5 var(--hand);border:1px solid var(--rule)}.friends-page .bear-speech:after{content:'';position:absolute;bottom:-6px;right:16px;width:10px;height:10px;transform:rotate(45deg);background:var(--paper);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.friends-page .bell{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-5%);z-index:4;width:88px;min-height:108px;padding:0 0 var(--space-4,4px);background:none;border:0;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;--bell-tint:#d8ad59;--bell-light:#f6d58c}.friends-page .bell:nth-of-type(3n+2){--bell-tint:#87a5ac;--bell-light:#c7ddd8}.friends-page .bell:nth-of-type(3n){--bell-tint:#c88775;--bell-light:#f1d1b9}.friends-page .bell svg{width:40px;height:68px;overflow:visible;filter:drop-shadow(1px 2px 1px #48382d24)}.friends-page .bell-assembly{transform-origin:20px 2px}.friends-page .bell-name{display:block;max-width:100%;min-width:56px;position:relative;margin-top:-1px;background:#fffef8f5;border-bottom:2px solid #dce1d1;font:var(--text-11,11px)/1.6 var(--sans);padding:5px var(--space-8,8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 3px #303b2c0d;transition:background .18s var(--ease),color .18s var(--ease)}.friends-page .bell-name:before{content:'';position:absolute;top:2px;left:50%;width:2px;height:2px;background:#b9b394}.friends-page .bell:hover .bell-name,.friends-page .bell:focus-visible .bell-name{background:var(--cream)}.friends-page .bell:hover .bell-assembly{animation:bell-touch .8s var(--ease)}.friends-page .bell[aria-pressed=true]{z-index:6}.friends-page .bell[aria-pressed=true] .bell-name{background:var(--sage);color:var(--paper);border-color:#405838}.friends-page .bell[aria-pressed=true] svg{filter:drop-shadow(0 0 5px #f6d58caa)}.friends-page .bell.ringing .bell-assembly{animation:bell-ring 1.2s var(--ease)}.friends-page .bell.draft-bell{--bell-tint:#c88775;--bell-light:#f1d1b9}.friends-page .bell.draft-bell .bell-name{background:#f4e2b9;color:var(--wood);border-color:#d8ad59}.friends-page .bell:focus-visible{outline-offset:3px}
@keyframes bell-touch{0%,100%{transform:rotate(0)}30%{transform:rotate(9deg)}65%{transform:rotate(-6deg)}}@keyframes bell-ring{0%,100%{transform:rotate(0)}15%{transform:rotate(20deg)}35%{transform:rotate(-16deg)}55%{transform:rotate(11deg)}75%{transform:rotate(-6deg)}}
.friends-page .friend-panel{min-width:0;padding:var(--space-24,24px) 0 0;position:relative}.friends-page .panel-intro{color:var(--muted);text-align:center;padding:var(--space-24,24px) var(--space-8,8px)}.friends-page .panel-intro svg{width:42px;height:56px;color:var(--sage);margin-bottom:var(--space-16,16px)}.friends-page .panel-intro h2{font:var(--text-24,24px)/1.6 var(--serif);font-weight:400;margin:0 0 var(--space-12,12px)}.friends-page .panel-intro p{font:var(--text-12,12px)/1.9 var(--sans);margin:0}.friends-page .friend-slip{position:relative;background:var(--paper);padding:var(--space-32,32px) var(--space-24,24px) var(--space-24,24px);box-shadow:0 2px 2px #303b2c08,0 12px 32px #303b2c0a;border:1px solid #e5e7d8}.friends-page .friend-slip:before{content:'';position:absolute;left:calc(50% - 3px);top:12px;width:6px;height:6px;border-radius:50%;background:var(--bg);box-shadow:inset 0 1px 2px #303b2c3d}.friends-page .friend-slip-label{font:var(--text-10,10px) var(--mono);letter-spacing:2px;color:var(--muted);margin:var(--space-8,8px) 0 var(--space-24,24px)}.friends-page .friend-slip h2{font:var(--text-28,28px)/1.5 var(--serif);font-weight:600;overflow-wrap:anywhere;margin:0 0 var(--space-8,8px)}.friends-page .friend-slip .friend-domain{font:var(--text-11,11px)/1.8 var(--mono);color:var(--muted);overflow-wrap:anywhere}.friends-page .friend-slip .friend-message{font:var(--text-14,14px)/1.9 var(--hand);margin:var(--space-24,24px) 0;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}.friends-page .visit-link{display:flex;justify-content:space-between;align-items:center;gap:var(--space-16,16px);padding:14px 0 0;border-top:1px solid var(--rule);font:var(--text-13,13px) var(--sans);text-decoration:none;color:var(--sage);min-height:48px}.friends-page .visit-link:hover{text-decoration:underline;text-underline-offset:4px}.friends-page .draft-label{display:block;font:var(--text-11,11px) var(--sans);color:var(--wood);margin-top:var(--space-12,12px)}.friends-page .random-button{display:flex;justify-content:center;gap:var(--space-12,12px);align-items:center;border:1px solid #c9d2bf;border-radius:3px;background:none;color:var(--sage);width:100%;min-height:44px;font:var(--text-12,12px) var(--sans);margin:var(--space-20,20px) 0 0}.friends-page .random-button:hover{background:var(--wash)}.friends-page .actor-note{font:var(--text-11,11px)/1.9 var(--hand);color:var(--muted);text-align:center;margin:var(--space-20,20px) 0 0}.friends-page .tree-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-32,32px);border-top:1px solid var(--rule);padding:var(--space-20,20px) 0 var(--space-24,24px)}.friends-page .branch-controls{display:flex;align-items:center;gap:var(--space-20,20px)}.friends-page .branch-button{background:none;border:0;min-height:44px;color:var(--sage);font:var(--text-12,12px) var(--sans);padding:var(--space-8,8px)}.friends-page .branch-button:hover{background:var(--wash)}.friends-page .branch-button:disabled{opacity:.35}.friends-page .branch-count{font:var(--text-11,11px) var(--mono);color:var(--muted);min-width:62px;text-align:center}.friends-page .tree-tools{display:flex;align-items:center;gap:var(--space-24,24px)}.friends-page .directory-button,.friends-page .motion-toggle{border:0;background:none;color:var(--muted);font:var(--text-12,12px) var(--sans);min-height:44px;padding:var(--space-8,8px) 0;display:flex;align-items:center;gap:var(--space-8,8px)}.friends-page .directory-button svg,.friends-page .motion-toggle svg{width:15px;height:15px}.friends-page .directory-button:hover,.friends-page .motion-toggle:hover{color:var(--ink)}.friends-page .scene-hint{font:var(--text-12,12px)/1.8 var(--hand);color:var(--muted);margin:0}.friends-page .path-divider{height:64px;position:relative;margin-bottom:var(--space-16,16px)}.friends-page .path-divider:before{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 16px);width:32px;background:radial-gradient(ellipse at 30% 20%,#b9c7a9 0 2px,transparent 3px),radial-gradient(ellipse at 70% 50%,#b9c7a9 0 2px,transparent 3px),radial-gradient(ellipse at 30% 80%,#b9c7a9 0 2px,transparent 3px);opacity:.6}
.friends-page .directory-dialog{margin:auto;padding:0;border:1px solid var(--rule);background:var(--paper);color:var(--ink);width:min(620px,calc(100vw - 32px));max-height:82vh;border-radius:4px;box-shadow:0 24px 72px #1f30212e}.friends-page .directory-dialog::backdrop{background:#1f30214d;backdrop-filter:blur(3px)}.friends-page .directory-head{position:sticky;top:0;background:var(--paper);padding:var(--space-24,24px) var(--space-24,24px) var(--space-16,16px);z-index:1;border-bottom:1px solid var(--rule)}.friends-page .directory-title{display:flex;justify-content:space-between;align-items:center;gap:var(--space-16,16px);margin-bottom:var(--space-16,16px)}.friends-page .directory-title h2{font:var(--text-24,24px) var(--serif);font-weight:400;margin:0}.friends-page .close-dialog{border:0;background:none;color:var(--muted);width:44px;height:44px;font-size:var(--text-24,24px)}.friends-page .directory-search{display:block;font:var(--text-11,11px) var(--sans);color:var(--muted)}.friends-page .directory-search input{display:block;width:100%;background:var(--bg);border:1px solid var(--rule);border-radius:2px;padding:var(--space-12,12px);margin-top:var(--space-8,8px);color:var(--ink);font-size:var(--text-14,14px)}.friends-page .directory-count{font:var(--text-11,11px) var(--mono);color:var(--muted);margin:var(--space-12,12px) 0 0}.friends-page .directory-list{list-style:none;margin:0;padding:var(--space-8,8px) var(--space-24,24px) var(--space-24,24px);display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-24,24px)}.friends-page .directory-list li{min-width:0;border-bottom:1px solid var(--rule)}.friends-page .directory-list button{width:100%;border:0;background:none;text-align:left;min-height:72px;padding:var(--space-12,12px) 0;color:var(--ink)}.friends-page .directory-list button:hover{color:var(--sage)}.friends-page .directory-list strong{font:var(--text-16,16px)/1.5 var(--serif);display:block;overflow-wrap:anywhere}.friends-page .directory-list small{font:var(--text-10,10px)/1.7 var(--mono);color:var(--muted);display:block;overflow-wrap:anywhere}.friends-page .directory-empty{padding:var(--space-24,24px) 0;grid-column:1/-1;font-size:var(--text-13,13px);color:var(--muted)}.friends-page .design-explanation{margin:var(--space-64,64px) 0 var(--space-32,32px);padding:var(--space-24,24px) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);color:var(--muted);font-size:var(--text-12,12px);line-height:1.9}.friends-page .design-explanation summary{cursor:pointer;color:var(--ink);font-size:var(--text-13,13px);min-height:28px}.friends-page .design-explanation p{max-width:820px}.friends-page .prototype-footer{display:flex;justify-content:space-between;gap:var(--space-24,24px);padding:0 0 var(--space-32,32px);font:var(--text-10,10px)/1.8 var(--mono);color:var(--muted)}.friends-page .prototype-footer a{text-decoration:none}
@media(max-width:1000px){.friends-page .page-wrap{padding:0 var(--space-28,28px)}.friends-page .tree-layout{grid-template-columns:minmax(0,1fr) 216px;gap:var(--space-16,16px);min-height:480px}.friends-page .friend-slip{padding:var(--space-28,28px) var(--space-20,20px) var(--space-20,20px)}.friends-page .friend-slip h2{font-size:var(--text-24,24px)}.friends-page .tree-intro h1{font-size:var(--text-36,36px)}.friends-page .bell{width:76px;min-height:96px}.friends-page .bell svg{width:34px;height:58px}.friends-page .bell-name{font-size:var(--text-10,10px);padding:var(--space-4,4px) 6px}.friends-page .tree-toolbar{gap:var(--space-16,16px)}.friends-page .scene-hint{display:none}.friends-page .tree-tools{gap:var(--space-16,16px)}.friends-page .tree-art{left:10%;width:88%;height:96%;top:1%}}
@media(max-width:720px){.friends-page .page-wrap{padding:0 var(--space-20,20px)}.friends-page .site-nav{height:72px;gap:var(--space-12,12px)}.friends-page .wordmark{font-size:var(--text-24,24px)}.friends-page .nav-links{gap:18px;font-size:var(--text-11,11px)}.friends-page .nav-links .nav-secondary{display:none}.friends-page .nav-links .register-link{padding:9px var(--space-12,12px)}.friends-page .tree-intro{padding:var(--space-28,28px) 0 0;align-items:start;gap:var(--space-12,12px)}.friends-page .tree-intro h1{font-size:var(--text-32,32px);letter-spacing:2px;margin-bottom:10px}.friends-page .tree-intro p{font-size:var(--text-12,12px)}.friends-page .intro-count{font-size:var(--text-9,9px);padding-top:5px}.friends-page .intro-count strong{font-size:var(--text-24,24px)}.friends-page .tree-layout{grid-template-columns:1fr;gap:0;min-height:0}.friends-page .tree-scene{margin-top:var(--space-12,12px);aspect-ratio:600/450}.friends-page .tree-art{left:8%;top:3%;width:92%;height:93.5%;object-fit:fill}.friends-page .bear-stage,.friends-page .tree-cord{height:93.3333%;top:6.6667%}.friends-page .bear-fallback{top:69.56%;height:26.4444%}.friends-page .bear-touch{top:76%;height:17%}.friends-page .bell{width:64px;min-height:84px;top:calc(var(--y) * .93333 + 6.6667%)}.friends-page .bell svg{width:30px;height:50px}.friends-page .bell-name{font-size:var(--text-9,9px);max-width:64px;min-width:42px;line-height:1.7;padding:var(--space-4,4px) 5px}.friends-page .bell[data-slot="3"]{transform:translate(-45%,-5%)}.friends-page .bell[data-slot="4"]{transform:translate(-65%,-5%)}.friends-page .bear-speech{left:8%;top:72%;font-size:var(--text-10,10px);max-width:116px;padding:var(--space-8,8px)}.friends-page .friend-panel{padding:0;margin:var(--space-12,12px) 0 0}.friends-page .panel-intro{padding:var(--space-12,12px) var(--space-8,8px);display:grid;grid-template-columns:auto 1fr;gap:0 var(--space-16,16px);text-align:left;align-items:center}.friends-page .panel-intro svg{grid-row:span 2;width:30px;height:40px;margin:0}.friends-page .panel-intro h2{font-size:var(--text-18,18px);margin:0 0 3px;line-height:1.6}.friends-page .panel-intro h2 br{display:none}.friends-page .panel-intro p{font-size:var(--text-11,11px)}.friends-page .friend-slip{padding:22px var(--space-20,20px) var(--space-16,16px)}.friends-page .friend-slip-label{margin:0 0 var(--space-12,12px);font-size:var(--text-9,9px)}.friends-page .friend-slip h2{font-size:var(--text-24,24px);padding-right:var(--space-8,8px);margin-bottom:2px}.friends-page .friend-slip .friend-message{font-size:var(--text-13,13px);margin:var(--space-12,12px) 0}.friends-page .friend-slip:before{left:auto;right:20px}.friends-page .visit-link{padding-top:var(--space-12,12px);min-height:42px}.friends-page .random-button{margin-top:var(--space-12,12px);min-height:44px}.friends-page .actor-note{display:none}.friends-page .tree-toolbar{margin-top:var(--space-20,20px);padding:var(--space-12,12px) 0;flex-wrap:wrap;gap:var(--space-4,4px) var(--space-12,12px)}.friends-page .branch-controls{gap:var(--space-8,8px)}.friends-page .branch-button{font-size:var(--text-11,11px);padding:var(--space-8,8px) 2px}.friends-page .branch-count{font-size:var(--text-10,10px);min-width:54px}.friends-page .tree-tools{gap:var(--space-16,16px)}.friends-page .directory-button,.friends-page .motion-toggle{font-size:var(--text-11,11px)}.friends-page .motion-toggle span{display:none}.friends-page .path-divider{height:48px;margin-bottom:var(--space-8,8px)}.friends-page .directory-list{grid-template-columns:1fr;padding:var(--space-8,8px) var(--space-20,20px) var(--space-20,20px)}.friends-page .directory-head{padding:var(--space-20,20px) var(--space-20,20px) var(--space-16,16px)}.friends-page .prototype-footer{flex-direction:column;gap:var(--space-8,8px)}.friends-page .design-explanation{margin-top:var(--space-40,40px)}}
@media(min-width:721px) and (max-width:900px){.friends-page .tree-layout{grid-template-columns:1fr;min-height:0}.friends-page .tree-scene{max-width:680px;margin:auto}.friends-page .friend-panel{max-width:100%;margin:var(--space-8,8px) 0 var(--space-24,24px);padding:0;display:grid;grid-template-columns:1fr 220px;gap:var(--space-24,24px);align-items:center}.friends-page .panel-intro{padding:var(--space-8,8px);display:grid;grid-template-columns:auto 1fr;gap:0 var(--space-20,20px);text-align:left}.friends-page .panel-intro svg{grid-row:span 2;margin:0}.friends-page .panel-intro h2{font-size:var(--text-24,24px)}.friends-page .panel-intro h2 br{display:none}.friends-page .random-button{margin:0}.friends-page .actor-note{display:none}.friends-page .friend-slip{padding:var(--space-24,24px)}.friends-page .friend-slip .friend-message{margin:var(--space-12,12px) 0}.friends-page .tree-art{left:15%;width:85%;height:93.5%;top:2.9%}}
@media(max-width:600px){.friends-page .bell{width:80px;min-height:84px}.friends-page .bell-name{max-width:80px;font-size:var(--text-10,10px);padding:var(--space-4,4px) 6px}.friends-page .bell svg{width:30px;height:50px}.friends-page .bell[data-slot]{transform:translate(-50%,-5%)}.friends-page .tree-art{left:15%;width:85%;height:87.3%;top:9.37%}}
.friends-page .motion-toggle{min-width:44px;justify-content:center}
.friends-page .bell{width:72px;min-height:86px}.friends-page .bell-hanging{width:100%;display:flex;align-items:center;flex-direction:column;transform-origin:50% 0}.friends-page .bell svg{width:32px;height:54px}.friends-page .bell-name{min-width:44px;padding:4px 5px;font-size:10px;max-width:100%}.friends-page .bell:hover .bell-assembly,.friends-page .bell.ringing .bell-assembly{animation:none}.friends-page .bell:hover .bell-hanging{animation:bell-touch .8s var(--ease)}.friends-page .bell.ringing .bell-hanging{animation:bell-ring 1.2s var(--ease)}.friends-page .motion-paused .bell-hanging{animation:none!important}
.friends-page .archive-button,.friends-page .wind-button{font:var(--text-12)/1.5 var(--sans);border:0;background:none;color:var(--sage);min-height:44px;padding:var(--space-8);cursor:pointer}.friends-page .archive-button{text-decoration:underline;text-underline-offset:4px;padding-right:0}.friends-page .wind-button{display:flex;gap:var(--space-8);align-items:center}.friends-page .wind-button svg{width:20px;height:20px}.friends-page .wind-button:disabled{opacity:.65}.friends-page .tree-caption{font:var(--text-11)/1.8 var(--sans);color:var(--muted);margin:0 0 var(--space-16);text-align:center}.friends-page .wind-leaves{position:absolute;inset:0;z-index:7;overflow:hidden;pointer-events:none}.friends-page .wind-leaf{position:absolute;width:7px;height:10px;background:var(--sage);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,60% 100%,0 70%,0 30%);opacity:0}.friends-page .wind-leaf:nth-child(3n){background:var(--cream)}
.friends-page .friend-slip-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);margin:0 0 var(--space-16)}.friends-page .friend-slip-top .friend-slip-label{margin:0;line-height:1.8;letter-spacing:1px;max-width:110px}.friends-page .friend-avatar{width:64px;height:64px;image-rendering:pixelated;object-fit:contain;flex-shrink:0;background:var(--wash);border-radius:50%}.friends-page .friend-copy-label{font:var(--text-10) var(--sans);color:var(--muted);margin:var(--space-20) 0 var(--space-8)}.friends-page .friend-slip .friend-message{margin:0 0 var(--space-20);font-family:var(--sans);font-size:var(--text-13);line-height:1.9}.friends-page .friend-status{font:var(--text-10)/1.8 var(--mono);color:var(--muted);margin:0 0 var(--space-12)}.friends-page .friend-health-detail{font:var(--text-11)/1.8 var(--sans);color:var(--wood);margin:0 0 var(--space-12)}.friends-page .friend-update{display:block;color:var(--sage);font-size:var(--text-11);line-height:1.8;padding-top:var(--space-12)}
.friends-page .directory-filters{display:flex;gap:var(--space-8);margin-top:var(--space-16)}.friends-page .directory-filters button{min-height:44px;border:0;background:none;color:var(--muted);font-size:var(--text-12);padding:var(--space-8) var(--space-12)}.friends-page .directory-filters button[aria-pressed=true]{background:var(--wash);color:var(--ink)}.friends-page .directory-note{font:var(--text-11)/1.8 var(--sans);color:var(--muted);margin:var(--space-12) 0 0}.friends-page .directory-list button{display:flex;gap:var(--space-12);align-items:center}.friends-page .directory-list img{object-fit:contain;image-rendering:pixelated;flex-shrink:0;background:var(--wash);border-radius:50%}.friends-page .directory-list span{min-width:0}.friends-page .directory-list li{display:flex;align-items:center;gap:var(--space-4,4px)}.friends-page .directory-list li>button{flex:1;min-width:0}.friends-page .directory-list .directory-desc{display:block;font:var(--text-12,12px)/1.6 var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friends-page .directory-visit{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:2px;color:var(--muted)}.friends-page .directory-visit svg{width:16px;height:16px}.friends-page .directory-visit:hover{color:var(--sage);background:var(--wash)}.friends-page .directory-visit:focus-visible{outline:2px solid var(--sage);outline-offset:-2px;color:var(--ink)}.friends-page .directory-list em{display:block;font:normal var(--text-10)/1.8 var(--sans);color:var(--muted)}
@media(min-width:601px) and (max-width:1100px){.friends-page .tree-layout{grid-template-columns:1fr;min-height:0}.friends-page .tree-scene{max-width:720px;margin:auto;aspect-ratio:600/420}.friends-page .tree-art{left:15%;width:85%;height:93.5%;top:2.9%}.friends-page .bear-stage,.friends-page .tree-cord{height:100%;top:0}.friends-page .bell{top:var(--y);width:64px;min-height:82px}.friends-page .friend-panel{display:grid;grid-template-columns:1fr 220px;gap:var(--space-24);margin:var(--space-16) 0 var(--space-24);padding:0}.friends-page .actor-note{display:none}.friends-page .random-button{margin:0;align-self:center}}
@media(max-width:600px){.friends-page .bell{width:50px;min-height:64px;top:calc(var(--y) * .93333 + 6.6667%)}.friends-page .bell svg{width:24px;height:40px}.friends-page .bell-name{font-size:9px;min-width:42px;max-width:62px;padding:3px 4px}.friends-page .bell-hanging{width:62px}.friends-page .tree-toolbar{column-gap:var(--space-8)}.friends-page .tree-tools{gap:var(--space-8)}.friends-page .wind-button{font-size:var(--text-11);padding:var(--space-4)}.friends-page .wind-button svg{width:16px;height:16px}.friends-page .friend-panel{display:block}.friends-page .friend-slip-top{margin-bottom:var(--space-12)}.friends-page .friend-slip-top .friend-slip-label{max-width:none}.friends-page .friend-avatar{width:56px;height:56px}.friends-page .friend-slip .friend-message{font-size:var(--text-12)}.friends-page .tree-caption{text-align:left;font-size:var(--text-10)}.friends-page .intro-count{max-width:105px}.friends-page .archive-button{font-size:var(--text-10)}.friends-page .directory-filters{gap:var(--space-4)}.friends-page .directory-filters button{padding:var(--space-8);font-size:var(--text-11)}}
.friends-page .motion-paused .bell-assembly{animation:none!important}
.friends-page .tree-wind-surface{position:absolute;inset:0;border:0;padding:0;background:none;z-index:0;width:100%;height:100%;cursor:pointer}.friends-page .tree-wind-surface:focus-visible{outline:2px dashed var(--sage);outline-offset:-4px}.friends-page .scene-settings{position:relative}.friends-page .scene-settings>summary{list-style:none;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;color:var(--muted);letter-spacing:3px}.friends-page .scene-settings>summary::-webkit-details-marker{display:none}.friends-page .scene-settings-panel{position:absolute;right:0;bottom:52px;z-index:12;min-width:160px;padding:var(--space-8) var(--space-16);background:var(--paper);box-shadow:0 8px 24px #303b2c18;border:1px solid var(--rule)}.friends-page .scene-settings-panel button{width:100%;min-height:44px;justify-content:flex-start}.friends-page .scene-settings-panel .motion-toggle span{display:inline}.friends-page .path-divider{height:24px;margin-bottom:0}.friends-page .path-divider:before{display:none}
@media(prefers-reduced-motion:reduce){html:has(.friends-page){scroll-behavior:auto}.friends-page *,.friends-page *:before,.friends-page *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


.friends-page .gb-online[hidden]{display:none}.friends-page #gb-submit-online{margin-right:var(--space-16,16px)}
.friends-page .gb-avatar-option[hidden],.friends-page .gb-avatar-toggle[hidden],.friends-page .gb-comment-page[hidden]{display:none}.friends-page .gb-avatar-toggle{margin-top:var(--space-4,4px);color:var(--gb-sage)}.friends-page .gb-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12,12px);margin-top:var(--space-12,12px)}.friends-page .gb-pagination button{color:var(--gb-sage);min-width:44px}.friends-page .gb-pagination button:disabled{color:var(--gb-muted);opacity:.55;cursor:default;text-decoration:none}.friends-page .gb-page-status{font:var(--text-11,11px) var(--mono,monospace);color:var(--gb-muted);text-align:center}.friends-page .gb-page-note{font-size:var(--text-10,10px);line-height:1.7;color:var(--gb-muted);margin:0}.friends-page #gb-thread-title{scroll-margin-top:var(--space-80,80px)}.friends-page #gb-thread-title:focus-visible{outline:2px solid var(--gb-sage);outline-offset:4px}
.friends-page .gb-wrap{--gb-paper:var(--paper,#fffef8);--gb-ink:var(--ink,#303b2c);--gb-muted:var(--muted,#717b66);--gb-rule:var(--rule,#dce1d1);--gb-sage:var(--sage,#607d55);color:var(--gb-ink);padding:var(--space-64,64px) 0 var(--space-40,40px);border-top:1px solid var(--gb-rule)}
.friends-page .gb-heading{display:flex;justify-content:space-between;align-items:end;gap:var(--space-24,24px);margin-bottom:var(--space-32,32px)}.friends-page .gb-kicker{display:block;font:var(--text-11,11px) var(--mono,monospace);letter-spacing:.12em;color:var(--gb-muted);margin-bottom:var(--space-12,12px)}.friends-page .gb-heading h2{font:var(--text-32,32px) var(--serif,serif);margin:0 0 var(--space-12,12px)}.friends-page .gb-heading p{font-size:var(--text-14,14px);line-height:1.8;margin:0;color:var(--gb-muted)}.friends-page .gb-online{font-size:var(--text-12,12px);color:var(--gb-sage);text-underline-offset:5px;white-space:nowrap}
.friends-page .gb-columns{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--space-64,64px);align-items:start}.friends-page .gb-station{background:var(--gb-paper);border:1px solid var(--gb-rule);border-radius:3px;padding:var(--space-28,28px) var(--space-32,32px) var(--space-24,24px);box-shadow:0 12px 32px #303b2c08;position:relative}.friends-page .gb-station:before{content:'';position:absolute;left:32px;right:32px;top:-4px;height:3px;background:var(--wood,#74523a);opacity:.5;border-radius:1px}.friends-page .gb-mode{border:0;border-bottom:1px solid var(--gb-rule);padding:0 0 var(--space-16,16px);margin:0 0 var(--space-24,24px);display:flex;gap:var(--space-24,24px)}.friends-page .gb-mode legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.friends-page .gb-mode label{cursor:pointer;display:flex;align-items:center;gap:var(--space-8,8px);font-size:var(--text-14,14px);min-height:28px}.friends-page .gb-mode input{accent-color:var(--gb-sage);width:15px;height:15px;margin:0}
.friends-page .gb-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-20,20px)}.friends-page .gb-field{display:block;min-width:0}.friends-page .gb-label{display:flex;justify-content:space-between;gap:var(--space-8,8px);align-items:baseline;font-size:var(--text-12,12px);margin-bottom:var(--space-8,8px)}.friends-page .gb-label small{font-size:var(--text-10,10px);color:var(--gb-muted)}.friends-page .gb-input,.friends-page .gb-message{box-sizing:border-box;width:100%;max-width:100%;border:0;border-bottom:1px solid #cbd2be;border-radius:0;background:transparent;color:var(--gb-ink);font:var(--text-14,14px)/1.6 var(--sans,system-ui);padding:9px 0;outline-offset:4px;min-height:44px}.friends-page .gb-input::placeholder,.friends-page .gb-message::placeholder{color:var(--gb-muted)}.friends-page .gb-message{resize:vertical;min-height:128px;line-height:32px;background:repeating-linear-gradient(transparent,transparent 31px,#dce1d16b 31px,#dce1d16b 32px);border-bottom:0;padding:0 0 var(--space-4,4px)}.friends-page .gb-message-field{margin-top:var(--space-24,24px)}.friends-page .gb-under-message{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-16,16px);font-size:var(--text-11,11px);line-height:1.7;color:var(--gb-muted);margin-top:var(--space-8,8px)}.friends-page .gb-count{font:var(--text-10,10px) var(--mono,monospace);white-space:nowrap}.friends-page .gb-actions{display:flex;align-items:center;gap:var(--space-16,16px);margin-top:var(--space-24,24px);flex-wrap:wrap}.friends-page .gb-button{appearance:none;border:1px solid var(--gb-sage);background:var(--gb-sage);color:#fffef8;border-radius:3px;min-height:44px;padding:10px var(--space-20,20px);font:var(--text-13,13px) var(--sans,system-ui);cursor:pointer}.friends-page .gb-button:hover{background:#49633f}.friends-page .gb-quiet{border:0;background:none;color:var(--gb-muted);font:var(--text-12,12px) var(--sans,system-ui);cursor:pointer;padding:10px 0;min-height:44px;text-decoration:underline;text-underline-offset:4px}.friends-page .gb-wrap :is(input,textarea,button,a):focus-visible{outline:2px solid var(--gb-sage);outline-offset:4px}.friends-page .gb-save{font-size:var(--text-10,10px);line-height:1.7;color:var(--gb-muted);margin:var(--space-12,12px) 0 0;min-height:17px}.friends-page .gb-error{font-size:var(--text-12,12px);line-height:1.7;color:#9a4e3e;margin:var(--space-12,12px) 0 0}.friends-page .gb-error:empty{display:none}.friends-page .gb-reply-target{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12,12px);font-size:var(--text-12,12px);padding:0 0 var(--space-16,16px);color:var(--gb-sage)}.friends-page .gb-reply-target[hidden],.friends-page .gb-draft[hidden]{display:none}
.friends-page .gb-draft{margin-top:var(--space-24,24px);display:grid;grid-template-columns:52px minmax(0,1fr);gap:var(--space-16,16px);border-top:1px dashed var(--gb-rule);padding-top:var(--space-24,24px);align-items:start}.friends-page .gb-bell{width:40px;height:68px;color:#b68c43;margin-top:var(--space-4,4px)}.friends-page .gb-draft-head{display:flex;align-items:baseline;gap:var(--space-12,12px);flex-wrap:wrap}.friends-page .gb-draft h3{font:var(--text-20,20px) var(--hand,serif);margin:0;overflow-wrap:anywhere}.friends-page .gb-draft-status{font-size:var(--text-10,10px);letter-spacing:.04em;color:#92754a}.friends-page .gb-draft-url{font:var(--text-10,10px)/1.6 var(--mono,monospace);color:var(--gb-muted);overflow-wrap:anywhere;margin:6px 0}.friends-page .gb-draft-message{font:var(--text-14,14px)/1.9 var(--hand,var(--serif,serif));margin:var(--space-8,8px) 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.friends-page .gb-draft-note{font-size:var(--text-11,11px);line-height:1.7;color:var(--gb-muted);margin:var(--space-12,12px) 0 0}.friends-page .gb-preview-reply{font-size:var(--text-11,11px);color:var(--gb-sage);margin:0 0 var(--space-8,8px)}.friends-page .gb-preview-reply:empty{display:none}
.friends-page .gb-thread{padding-top:var(--space-4,4px);min-width:0}.friends-page .gb-thread-heading{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--gb-rule);padding-bottom:var(--space-16,16px);gap:var(--space-12,12px)}.friends-page .gb-thread h3{font:var(--text-20,20px) var(--serif,serif);margin:0}.friends-page .gb-thread-heading span{font:var(--text-10,10px) var(--mono,monospace);color:var(--gb-muted)}.friends-page .gb-comment{padding:var(--space-24,24px) 0;border-bottom:1px solid var(--gb-rule)}.friends-page .gb-comment-head{display:flex;justify-content:space-between;gap:var(--space-12,12px);align-items:baseline}.friends-page .gb-comment-name{font-size:var(--text-13,13px);font-weight:600;overflow-wrap:anywhere;color:var(--gb-ink);text-decoration:none}.friends-page .gb-comment-name[href]:hover{text-decoration:underline}.friends-page .gb-comment time{font:var(--text-10,10px) var(--mono,monospace);color:var(--gb-muted);white-space:nowrap}.friends-page .gb-comment p{font-size:var(--text-13,13px);line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0 var(--space-4,4px)}.friends-page .gb-reply-button{font-size:var(--text-11,11px);min-height:36px;padding:6px 0}.friends-page .gb-replies{margin:var(--space-8,8px) 0 0 var(--space-8,8px);padding-left:var(--space-16,16px);border-left:1px solid var(--gb-rule)}.friends-page .gb-replies .gb-comment{padding:var(--space-12,12px) 0 0;border:0}.friends-page .gb-replies .gb-replies{margin-left:0;padding-left:var(--space-12,12px)}.friends-page .gb-thread-foot{font-size:var(--text-11,11px);line-height:1.8;color:var(--gb-muted);margin:var(--space-16,16px) 0 0}.friends-page .gb-empty{padding:var(--space-32,32px) 0;color:var(--gb-muted);font-size:var(--text-13,13px);line-height:1.9}.friends-page .gb-empty p{margin:0 0 var(--space-8,8px)}.friends-page .gb-empty strong{font:var(--text-20,20px) var(--hand,serif);font-weight:400;color:var(--gb-ink)}
.friends-page .gb-comment-body.gb-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}.friends-page .gb-comment-actions{display:flex;gap:var(--space-20,20px);align-items:center}.friends-page .gb-fulltext-button{font-size:var(--text-11,11px);min-height:36px;padding:6px 0;color:var(--gb-sage)}.friends-page .gb-reply-details{margin-top:var(--space-4,4px)}.friends-page .gb-reply-details>summary{font-size:var(--text-11,11px);color:var(--gb-sage);cursor:pointer;min-height:36px;line-height:36px;list-style-position:inside}.friends-page .gb-reply-details>summary:focus-visible{outline:2px solid var(--gb-sage);outline-offset:4px}.friends-page .gb-reply-details[open]>summary{margin-bottom:var(--space-8,8px)}
.friends-page .gb-avatar-field{margin-top:var(--space-24,24px);border:0;padding:0;min-width:0}.friends-page .gb-avatar-field[hidden]{display:none}.friends-page .gb-avatar-field legend{font-size:var(--text-12,12px);padding:0;margin-bottom:var(--space-12,12px)}.friends-page .gb-avatar-row{display:flex;gap:var(--space-16,16px);align-items:center}.friends-page .gb-avatar-preview{width:64px;height:64px;flex:none;object-fit:cover;image-rendering:pixelated;background:var(--wash,#e9eddc);border-radius:4px}.friends-page .gb-avatar-copy{min-width:0}.friends-page .gb-avatar-copy p{margin:0;font-size:var(--text-12,12px);line-height:1.7}.friends-page .gb-avatar-copy small{display:block;font-size:var(--text-10,10px);line-height:1.7;color:var(--gb-muted);margin-top:var(--space-4,4px)}.friends-page .gb-avatar-options{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--space-4,4px);margin-top:var(--space-12,12px)}.friends-page .gb-avatar-option{border:0;border-radius:3px;background:transparent;padding:var(--space-4,4px);min-width:44px;min-height:52px;cursor:pointer;color:var(--gb-ink);position:relative}.friends-page .gb-avatar-option:hover{background:var(--wash,#e9eddc)}.friends-page .gb-avatar-option[aria-pressed=true]{background:var(--wash,#e9eddc)}.friends-page .gb-avatar-option[aria-pressed=true]:after{content:'✓';position:absolute;right:1px;bottom:0;font-size:var(--text-10,10px);line-height:16px;width:16px;text-align:center;background:var(--gb-ink);color:var(--gb-paper);border-radius:50%}.friends-page .gb-avatar-option img{width:100%;aspect-ratio:1;object-fit:cover;display:block;image-rendering:pixelated}.friends-page .gb-avatar-custom{margin-top:var(--space-12,12px)}.friends-page .gb-avatar-custom>summary{font-size:var(--text-11,11px);color:var(--gb-sage);min-height:44px;line-height:44px;cursor:pointer}.friends-page .gb-avatar-custom>summary:focus-visible{outline:2px solid var(--gb-sage);outline-offset:4px}.friends-page .gb-avatar-upload{display:flex;align-items:center;gap:var(--space-12,12px);margin-top:var(--space-12,12px);flex-wrap:wrap}.friends-page .gb-upload-label{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:var(--text-12,12px);cursor:pointer;color:var(--gb-sage);text-decoration:underline;text-underline-offset:4px}.friends-page .gb-upload-label:focus-within{outline:2px solid var(--gb-sage);outline-offset:4px}.friends-page .gb-upload-label input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.friends-page .gb-avatar-upload small{font-size:var(--text-10,10px);line-height:1.7;color:var(--gb-muted)}.friends-page .gb-avatar-error{margin:var(--space-8,8px) 0 0;font-size:var(--text-11,11px);line-height:1.7;color:#9a4e3e}.friends-page .gb-avatar-error:empty{display:none}.friends-page .gb-draft-avatar{width:48px;height:48px;object-fit:cover;image-rendering:pixelated;border-radius:3px;background:var(--wash,#e9eddc)}.friends-page .gb-draft-avatar[hidden],.friends-page .gb-bell[hidden]{display:none}.friends-page .gb-draft-status{color:var(--wood,#74523a)}.friends-page .gb-exchange{margin-bottom:var(--space-24,24px);padding-bottom:var(--space-24,24px);border-bottom:1px solid var(--gb-rule)}.friends-page .gb-exchange h3{font:var(--text-20,20px) var(--serif,serif);margin:0 0 var(--space-12,12px)}.friends-page .gb-exchange p{font-size:var(--text-12,12px);line-height:1.9;color:var(--gb-muted);margin:0 0 var(--space-12,12px)}.friends-page .gb-exchange-info{margin:0;font-size:var(--text-11,11px);line-height:1.9;display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--space-4,4px) var(--space-12,12px)}.friends-page .gb-exchange-info dt{color:var(--gb-muted)}.friends-page .gb-exchange-info dd{margin:0;overflow-wrap:anywhere;color:var(--gb-ink)}.friends-page .gb-exchange-info a{color:inherit;text-underline-offset:3px}.friends-page .gb-exchange-foot{display:flex;gap:var(--space-12,12px);align-items:center;flex-wrap:wrap;margin-top:var(--space-8,8px)}.friends-page .gb-copy-status{font-size:var(--text-10,10px);color:var(--gb-muted)}.friends-page .gb-exchange-copy{color:var(--gb-sage)}
@media(max-width:900px){.friends-page .gb-columns{gap:var(--space-32,32px)}.friends-page .gb-station{padding:var(--space-24,24px)}.friends-page .gb-fields{grid-template-columns:1fr;gap:var(--space-16,16px)}.friends-page .gb-heading{align-items:start}.friends-page .gb-heading h2{font-size:var(--text-28,28px)}.friends-page .gb-avatar-options{grid-template-columns:repeat(4,minmax(0,1fr))}.friends-page .gb-avatar-option img{width:44px;height:44px;margin:auto}}
@media(max-width:640px){.friends-page .gb-wrap{padding-top:var(--space-40,40px)}.friends-page .gb-heading{display:block;margin-bottom:var(--space-28,28px)}.friends-page .gb-online{display:inline-block;margin-top:var(--space-16,16px)}.friends-page .gb-columns{grid-template-columns:1fr;gap:var(--space-40,40px)}.friends-page .gb-station{padding:var(--space-24,24px) var(--space-20,20px) var(--space-20,20px)}.friends-page .gb-station:before{left:20px;right:20px}.friends-page .gb-mode{gap:var(--space-20,20px)}.friends-page .gb-heading h2{font-size:var(--text-28,28px)}.friends-page .gb-under-message{gap:var(--space-12,12px)}.friends-page .gb-comment-head{gap:var(--space-8,8px)}.friends-page .gb-replies{margin-left:0;padding-left:var(--space-12,12px)}.friends-page .gb-actions{gap:var(--space-20,20px)}}

.friends-page {
  --paper-leaf:#f3f5e9;--edge-leaf:#cdd5bf;
  --paper-linen:#faf8ef;--edge-linen:#d8d3c4;
  --paper-cream:#fff8e8;--edge-cream:#dccdb0;
  --paper-mist:#eff4f1;--edge-mist:#cbd6d0;
  --paper-blossom:#fbf1eb;--edge-blossom:#dbcac0;
  --paper-kraft:#f1e5d2;--edge-kraft:#c8b79c;
  --paper-fiber:#74523a08;--paper-light:#ffffff54;
  --kraft-muted:#5b654f;--kraft-link:#4f6746;
}
.friends-page .portrait-frame{position:relative;display:block;flex:none;width:64px;height:64px;overflow:hidden;background:var(--portrait-wash,var(--wash));border-radius:50%;isolation:isolate}
.friends-page .portrait-frame[hidden]{display:none}
.friends-page .portrait-frame>img{position:absolute!important;display:block;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;left:0;top:0;object-fit:cover;background:none!important;border-radius:0!important;transform:none;image-rendering:pixelated}
.friends-page .portrait-frame[data-portrait]>img{left:var(--portrait-x);top:var(--portrait-y);transform:scale(var(--portrait-scale));transform-origin:0 0;object-fit:fill}
.friends-page .portrait-frame[data-portrait-context="directory"]{width:40px;height:40px}
.friends-page .portrait-frame[data-portrait-context="picker"]{width:100%;height:auto;aspect-ratio:1}
.friends-page .portrait-frame[data-portrait-context="gb-preview-avatar"]{width:48px;height:48px}
.friends-page .portrait-frame:not([data-portrait]){border-radius:4px}
.friends-page .portrait-frame[data-portrait-context="friend-avatar"]{border-radius:50%}
.friends-page .friend-slip[data-paper]{background-color:var(--sheet-paper);border-color:var(--sheet-edge);--rule:var(--sheet-edge)}
.friends-page .friend-slip[data-paper="leaf"]{--sheet-paper:var(--paper-leaf);--sheet-edge:var(--edge-leaf);--portrait-wash:#e3ead5;background-image:repeating-linear-gradient(115deg,transparent 0 8px,var(--paper-fiber) 8px 9px,transparent 9px 18px);border-radius:2px 2px 18px 2px}
.friends-page .friend-slip[data-paper="linen"]{--sheet-paper:var(--paper-linen);--sheet-edge:var(--edge-linen);--portrait-wash:#eae6d7;background-image:repeating-linear-gradient(0deg,transparent 0 3px,var(--paper-fiber) 3px 4px),repeating-linear-gradient(90deg,transparent 0 3px,var(--paper-fiber) 3px 4px);outline:1px solid var(--sheet-edge);outline-offset:-5px;border-radius:2px}
.friends-page .friend-slip[data-paper="cream"]{--sheet-paper:var(--paper-cream);--sheet-edge:var(--edge-cream);--portrait-wash:#efe4c7;background-image:repeating-linear-gradient(0deg,transparent 0 27px,var(--paper-fiber) 27px 28px);border-radius:2px 2px 10px 10px}
.friends-page .friend-slip[data-paper="mist"]{--sheet-paper:var(--paper-mist);--sheet-edge:var(--edge-mist);--portrait-wash:#dfe9e3;background-image:linear-gradient(135deg,var(--paper-light),transparent 65%);box-shadow:inset 0 0 0 5px var(--sheet-paper),inset 0 0 0 6px var(--sheet-edge),0 2px 2px #303b2c08,0 12px 32px #303b2c0a;border-radius:2px}
.friends-page .friend-slip[data-paper="blossom"]{--sheet-paper:var(--paper-blossom);--sheet-edge:var(--edge-blossom);--portrait-wash:#eee0d7;border-radius:18px 2px 2px 2px;background-image:linear-gradient(135deg,var(--paper-light),transparent 48%)}
.friends-page .friend-slip[data-paper="kraft"]{--sheet-paper:var(--paper-kraft);--sheet-edge:var(--edge-kraft);--portrait-wash:#e6d8bf;--muted:var(--kraft-muted);--sage:var(--kraft-link);background-image:radial-gradient(ellipse at 3px 2px,var(--paper-fiber) 0 .7px,transparent 1px),radial-gradient(ellipse at 7px 6px,var(--paper-fiber) 0 .6px,transparent 1px);background-size:13px 9px,17px 13px;border-radius:2px;outline:1px dashed var(--sheet-edge);outline-offset:-6px}
@media(max-width:600px){.friends-page .portrait-frame[data-portrait-context="friend-avatar"]{width:56px;height:56px}}
.friends-page .tree-scene[data-mode="roam"] {
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  --roam-zoom: 1;
}
.friends-page .tree-scene[data-mode="roam"].roam-dragging,
.friends-page .tree-scene[data-mode="roam"].roam-dragging * { cursor: grabbing !important; }
.friends-page .tree-scene[data-mode="roam"] #scene-world {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}
.friends-page .tree-scene[data-mode="roam"] .tree-art {
  left: 15%; top: 2.9%; width: 85%; height: 93.5%;
}
.friends-page .tree-scene[data-mode="roam"] .bear-stage,
.friends-page .tree-scene[data-mode="roam"] .tree-cord { top: 0; height: 100%; }
.friends-page .tree-scene[data-mode="roam"] .bear-fallback { top: 67.38095%; height: 28.3333%; }
.friends-page .tree-scene[data-mode="roam"] .bear-touch { top: 74%; height: 19%; }
.friends-page .tree-scene[data-mode="roam"] .bell {
  top: var(--y);
  width: calc(44px / var(--roam-zoom));
  min-height: calc(44px / var(--roam-zoom));
  height: calc(44px / var(--roam-zoom));
  padding: 0;
  transform: translate(-50%, 0);
  border-radius: 50%;
}
.friends-page .tree-scene[data-mode="roam"] .bell-hanging { width: 100%; }
.friends-page .tree-scene[data-mode="roam"] .bell svg {
  width: calc(24px / var(--roam-zoom));
  height: calc(41px / var(--roam-zoom));
}
.friends-page .tree-scene[data-mode="roam"] .bell-name {
  position: absolute;
  top: calc(36px / var(--roam-zoom));
  min-width: 0;
  max-width: none;
  width: calc(64px / var(--roam-zoom));
  padding: calc(3px / var(--roam-zoom)) calc(4px / var(--roam-zoom));
  font-size: calc(var(--text-10, 10px) / var(--roam-zoom));
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
}
.friends-page .tree-scene[data-mode="roam"] .bell-name:before {
  top: calc(2px / var(--roam-zoom));
  width: calc(2px / var(--roam-zoom));
  height: calc(2px / var(--roam-zoom));
}
.friends-page .tree-scene[data-mode="roam"][data-roam-detail="names"] .bell-name,
.friends-page .tree-scene[data-mode="roam"] .bell:is(:hover,:focus-visible,[aria-pressed="true"]) .bell-name { opacity: 1; }
.friends-page .tree-scene[data-mode="roam"] .bell:is(:hover,:focus-visible) { z-index: 8; }
.friends-page .tree-scene[data-mode="roam"][data-roam-detail="overview"] .bell {
  width: calc(24px / var(--roam-zoom));
  min-height: calc(28px / var(--roam-zoom));
  height: calc(28px / var(--roam-zoom));
}
.friends-page .tree-scene[data-mode="roam"][data-roam-detail="overview"] .bell svg {
  width: calc(16px / var(--roam-zoom));
  height: calc(27px / var(--roam-zoom));
}
.friends-page .tree-scene[data-mode="roam"][data-roam-detail="overview"] .bell-name { top: calc(25px / var(--roam-zoom)); }
.friends-page .tree-scene[data-mode="roam"] .bell:focus-visible {
  outline-width: calc(2px / var(--roam-zoom));
  outline-offset: calc(3px / var(--roam-zoom));
}
.friends-page .roam-controls { display: flex; align-items: center; gap: var(--space-8, 8px); }
.friends-page .roam-controls button {
  min-width: 44px; min-height: 44px;
  border: 0; background: transparent; color: var(--sage);
  padding: var(--space-8, 8px);
  font: var(--text-12, 12px)/1.4 var(--sans);
}
.friends-page .roam-controls button:hover { background: var(--wash); }
.friends-page .roam-controls button:disabled { color: var(--muted); opacity: .5; }
.friends-page .roam-controls output { color: var(--muted); font: var(--text-11, 11px)/1.4 var(--mono); min-width: 44px; text-align: center; }
.friends-page .roam-hint { color: var(--muted); font: var(--text-11, 11px)/1.8 var(--sans); }

.friends-page .comparison-bar{padding:24px 0 20px;border-bottom:1px solid var(--rule)}
.friends-page .comparison-label{font:11px/1.6 var(--mono);color:var(--muted);margin:0 0 12px;letter-spacing:1px}
.friends-page .mode-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.friends-page .mode-tabs button{text-align:left;background:transparent;border:1px solid var(--rule);padding:14px 16px;color:var(--muted);min-height:72px;border-radius:3px}
.friends-page .mode-tabs button[aria-pressed=true]{background:var(--paper);border-color:var(--sage);color:var(--ink);box-shadow:0 3px 0 var(--wash)}
.friends-page .mode-tabs strong{display:block;font:16px/1.6 var(--serif);font-weight:600}.friends-page .mode-tabs small{display:block;font-size:11px;line-height:1.7;margin-top:3px}
.friends-page .mode-description{font-size:12px;line-height:1.8;color:var(--muted);margin:16px 0 0;max-width:850px}
.friends-page #scene-world{position:absolute;inset:0;transform-origin:0 0}
.friends-page #pull-cord{stroke-width:.75;stroke:#88755c;opacity:.8}
.friends-page .tree-layout{grid-template-areas:"scene friend" "toolbar friend";row-gap:0}
.friends-page .tree-scene{grid-area:scene}.friends-page .friend-panel{grid-area:friend}.friends-page .tree-toolbar{grid-area:toolbar;padding:12px 0;margin:0}
.friends-page .tree-scene[data-mode=roam]{aspect-ratio:600/420;border-radius:6px;background:radial-gradient(ellipse at 50% 65%,#e9eddc80,transparent 70%)}
.friends-page .forest-nav{display:flex;justify-content:center;gap:20px;margin:24px 0 0;padding:0 0 8px;border-bottom:1px solid var(--rule)}
.friends-page .forest-nav button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:72px;padding:8px;border:0;background:none;color:var(--muted);position:relative;font:12px/1.5 var(--sans)}
.friends-page .forest-nav img{width:62px;height:48px;object-fit:contain;image-rendering:pixelated;opacity:.7;transition:transform .2s var(--ease)}
.friends-page .forest-nav button[aria-pressed=true]{color:var(--sage)}.friends-page .forest-nav button[aria-pressed=true] img{opacity:1;transform:translateY(-3px)}
.friends-page .forest-nav button[aria-pressed=true]:after{content:'';position:absolute;bottom:-9px;height:2px;background:var(--sage);left:12px;right:12px}
.friends-page .forest-nav small{font:10px/1.6 var(--mono)}
.friends-page .mode-controls{display:flex;align-items:center;gap:12px}.friends-page .mode-controls button{min-height:44px;background:none;border:0;padding:8px;color:var(--sage);font-size:12px}.friends-page .mode-controls button:hover{background:var(--wash)}
.friends-page .mode-controls button:disabled{opacity:.4}.friends-page .scene-location{font:11px/1.6 var(--mono);color:var(--muted)}
.friends-page .tree-scene[data-mode=forest] .tree-art{left:15%;width:85%;object-fit:fill}
.friends-page .tree-scene[data-mode=forest] .bell{transform:translateX(-50%);min-height:78px;padding-top:0}
.friends-page .roam-hint{margin:0 0 20px}.friends-page .preview-links{display:flex;flex-wrap:wrap;gap:20px;margin-top:16px;font-size:11px;line-height:1.8}.friends-page .preview-links a{color:var(--sage);text-underline-offset:3px}
@media(max-width:1100px){.friends-page .tree-layout{grid-template-areas:"scene" "toolbar" "friend";grid-template-columns:1fr}}
@media(max-width:600px){
 .friends-page .comparison-bar{padding-top:20px}.friends-page .mode-tabs{gap:6px}.friends-page .mode-tabs button{padding:10px 8px;min-height:68px}.friends-page .mode-tabs strong{font-size:13px;line-height:1.5}.friends-page .mode-tabs small{font-size:9px}.friends-page .mode-description{font-size:11px}.friends-page .forest-nav{gap:0;justify-content:space-between;margin-top:20px}.friends-page .forest-nav button{min-width:0;flex:1;padding:4px;font-size:11px}.friends-page .forest-nav img{width:48px;height:42px}.friends-page .forest-nav small{font-size:9px}.friends-page .mode-controls{gap:4px}.friends-page .mode-controls button{font-size:11px}.friends-page .scene-location{font-size:10px}.friends-page .tree-tools{margin-left:auto}.friends-page .tree-toolbar{gap:8px}.friends-page .tree-scene[data-mode=forest] .bell{width:44px;height:48px;min-height:48px}.friends-page .tree-scene[data-mode=forest] .bell-hanging{width:56px}.friends-page .tree-scene[data-mode=forest] .bell svg{width:17px;height:29px}.friends-page .tree-scene[data-mode=forest] .bell-name{min-width:40px;max-width:58px;font-size:8px;padding:2px 3px}.friends-page .roam-controls{gap:4px}.friends-page .roam-controls output{min-width:36px}.friends-page .preview-links{gap:12px}
}

body:has(.friends-page){display:block;padding:0;background:#f7f8f0;align-items:stretch;justify-content:stretch}.friends-page{width:100%;color:var(--ink);font-family:var(--sans);min-height:100vh}.friends-page .page-wrap{padding-top:24px}.friends-page .gb-email-field{margin-top:20px}.friends-page .gb-notify{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-top:12px}.friends-page .gb-comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.friends-page .gb-comment-person{display:flex;align-items:center;gap:8px}.friends-page .gb-submit-confirm[hidden]{display:none}.friends-page .gb-avatar-upload{display:none}