:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#eef3fb;--surface:#fff;--border:#d7e3f5;--tree-line:#90a8cc;--text:#1e293b;--text-muted:#64748b;--accent:#2563eb;--accent-soft:#dce9ff;--male:#2563eb;--female:#dc2626;--danger:#dc2626;font-family:Hiragino Sans,Yu Gothic,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0}button{font:inherit;cursor:pointer}ul{margin:0;padding:0;list-style:none}.app{min-height:100vh;padding-bottom:env(safe-area-inset-bottom);flex-direction:column;display:flex}.toolbar{padding:calc(10px + env(safe-area-inset-top)) 18px 10px;background:var(--surface);border-bottom:1px solid var(--border);z-index:5;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;display:grid;position:sticky;top:0}.toolbar-logo{justify-self:start;width:auto;height:30px;display:block}.toolbar-sublogo{justify-self:center;width:auto;height:56px;display:block}.toolbar-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.toolbar-actions button{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:6px;padding:6px 12px;font-size:.85rem}.toolbar-actions button:hover{background:var(--accent-soft)}.edit-toggle{color:var(--text);background:var(--accent-soft);border-radius:999px;align-items:center;gap:4px;padding:3px 8px;font-size:.75rem;display:flex}.edit-toggle input{accent-color:var(--accent);width:13px;height:13px}.toolbar-actions .link-button{color:var(--text-muted)}.unsaved-badge{color:var(--danger);background:#fbe4e0;border-radius:999px;padding:3px 8px;font-size:.75rem}.link-button{color:var(--text-muted);background:0 0;border:none;padding:0;text-decoration:underline}.app-main{flex:1;align-items:flex-start;gap:0;display:flex}.tree-scroll-area{flex:1;min-width:0;padding:6px 0;overflow-x:auto}.zoom-controls{background:var(--surface);border:1px solid var(--border);border-radius:999px;align-items:center;gap:6px;margin:0 0 6px 4px;padding:4px 6px;display:inline-flex;position:sticky;left:4px;box-shadow:0 1px 3px #2563eb14}.zoom-controls button{background:var(--accent-soft);color:var(--accent);border:none;border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;font-size:1rem;line-height:1;display:flex}.zoom-controls button:hover{background:var(--accent);color:#fff}.zoom-controls span{color:var(--text-muted);text-align:center;min-width:3ch;font-size:.8rem}.zoom-controls .zoom-controls-divider{background:var(--border);flex-shrink:0;width:1px;min-width:1px;height:18px}.zoom-controls .align-toggle{border-radius:999px;width:auto;height:auto;padding:4px 10px;font-size:.75rem}.zoom-controls .align-toggle.active{background:var(--accent);color:#fff;font-weight:600}.birthday-sidebar{background:var(--surface);border:1px solid var(--border);border-radius:14px;flex-shrink:0;width:232px;margin:10px 12px 10px 0;padding:14px;box-shadow:0 4px 14px #2563eb14}.birthday-sidebar h2{color:var(--accent);margin:0 0 10px;font-size:.9rem;font-weight:700}.birthday-sidebar-empty{color:var(--text-muted);font-size:.8rem}.birthday-sidebar-list{flex-direction:column;gap:6px;display:flex}.birthday-sidebar-row{background:var(--surface);border:1px solid var(--border);text-align:left;width:100%;color:inherit;border-radius:10px;align-items:center;gap:10px;padding:8px 10px;display:flex}.birthday-sidebar-row:hover{background:var(--accent-soft)}@media (width<=860px){.app-main{flex-direction:column;align-items:stretch}.tree-scroll-area{width:100%}.birthday-sidebar{width:100%;padding:0 16px 16px}}.hint{text-align:center;color:var(--text-muted);padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);margin:12px 0 0;font-size:.82rem}.empty-state{text-align:center;color:var(--text-muted)}.error-banner{color:var(--danger);text-align:center;background:#fbe4e0;margin:0;padding:8px 24px;font-size:.85rem}.birthday-banner{background:linear-gradient(90deg, var(--accent), #4338ca);color:#fff;justify-content:center;align-items:center;gap:10px;margin:0;padding:10px 24px;font-size:.9rem;display:flex}.birthday-banner-icon{background:#fff;border-radius:50%;flex-shrink:0;width:10px;height:10px}.birthday-banner-close{color:#fff;opacity:.85;background:0 0;border:none;padding:0 0 0 8px;font-size:1.1rem;line-height:1}.birthday-banner-close:hover{opacity:1}.tree-wrapper{justify-content:center;min-width:fit-content;display:flex}.tree-wrapper.tree-align-left{justify-content:flex-start}.tree,.tree ul{justify-content:center;padding-top:18px;display:flex;position:relative}.tree{--anchor-magnitude:59px;--anchor-left-near:52px}.tree.tree-root{padding-top:0}.tree li{flex-direction:column;align-items:center;padding:18px 8px 0;display:flex;position:relative}.tree.tree-root>li{padding-top:0}.tree li:before,.tree li:after{content:"";top:0;right:calc(50% - (var(--anchor-sign,0) * var(--anchor-magnitude)));width:calc(50% + (var(--anchor-sign,0) * var(--anchor-magnitude)));border-top:2px solid var(--tree-line);height:18px;position:absolute}.tree.tree-root>li:before,.tree.tree-root>li:after{display:none}.tree li:after{right:auto;left:calc(50% + (var(--anchor-sign,0) * var(--anchor-magnitude)));width:calc(50% - (var(--anchor-sign,0) * var(--anchor-magnitude)));border-left:2px solid var(--tree-line)}.tree li:only-child:before,.tree li:only-child:after{display:none}.tree li:first-child:before,.tree li:last-child:after{border:0}.tree li:last-child:before{border-right:2px solid var(--tree-line);border-radius:0 6px 0 0}.tree li:first-child:after{border-radius:6px 0 0}.tree ul:before{content:"";border-left:2px solid var(--tree-line);height:18px;position:absolute;top:0;left:50%}.tree-align-left .tree,.tree-align-left .tree ul{justify-content:flex-start}.tree-align-left .tree li{align-items:flex-start}.tree-align-left .tree li:before{width:calc(8px + var(--anchor-left-near) + var(--anchor-left-sign,0) * 2 * var(--anchor-magnitude));left:0;right:auto}.tree-align-left .tree li:after{left:calc(8px + var(--anchor-left-near) + var(--anchor-left-sign,0) * 2 * var(--anchor-magnitude));width:calc(100% - (8px + var(--anchor-left-near) + var(--anchor-left-sign,0) * 2 * var(--anchor-magnitude)))}.tree-align-left .tree ul:before{left:calc(var(--anchor-left-near) + var(--anchor-left-sign,0) * 2 * var(--anchor-magnitude))}.tree-align-left .tree li:first-child:before,.tree-align-left .tree li:last-child:after{border-top:2px solid var(--tree-line)}.tree-align-left .tree li:last-child:before{border-right:0;border-radius:0}.tree-align-left .tree li:first-child:after{border-radius:0}.couple{align-items:center;display:flex}.couple-connector{background:var(--tree-line);width:14px;height:2px}.person-card{background:var(--surface);border:1px solid var(--border);border-top:4px solid var(--text-muted);border-radius:8px;flex-direction:column;align-items:center;width:104px;padding:7px;display:flex;box-shadow:0 1px 3px #0000000f}.person-card.gender-male{border-top-color:var(--male)}.person-card.gender-female{border-top-color:var(--female)}.person-card-main{width:100%;color:inherit;text-align:center;background:0 0;border:none;flex-direction:column;align-items:center;gap:6px;padding:0;display:flex}.avatar{background:var(--accent-soft);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:46px;height:46px;display:flex;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.avatar-fallback{color:var(--accent);font-size:1.1rem;font-weight:600}.avatar-large{width:84px;height:84px}.avatar-large .avatar-fallback{font-size:1.8rem}.person-name{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:.9rem;font-weight:600;line-height:1.3;overflow:hidden}.person-birthdate{color:var(--text-muted);white-space:nowrap;min-height:1.2em;font-size:.66rem;display:block}.person-card-actions{flex-wrap:wrap;justify-content:center;gap:4px;margin-top:8px;display:flex}.person-card-actions button{border:1px solid var(--border);background:var(--surface);border-radius:6px;min-height:30px;padding:6px 8px;font-size:.72rem}.person-card-actions button:hover{background:var(--accent-soft)}.person-card-actions button.danger{color:var(--danger);border-color:var(--danger)}.person-card-actions button.danger:hover{background:#f8d7d3}.person-list-info{flex-direction:column;gap:2px;display:flex}.person-list-meta{color:var(--text-muted);font-size:.8rem}.profile-modal{padding:0;overflow:hidden}.profile-modal-header{background:linear-gradient(160deg, var(--profile-accent,var(--accent)), transparent 140%);flex-direction:column;align-items:center;gap:12px;padding:32px 24px 24px;display:flex}.profile-modal-header .avatar-large{border:3px solid var(--surface);width:100px;height:100px;box-shadow:0 4px 16px #0f172a26}.profile-heading{text-align:center}.profile-heading h2{margin:0 0 4px;font-family:Poppins,Hiragino Sans,sans-serif;font-size:1.3rem;font-weight:700}.profile-birthdate{color:var(--text-muted);margin:0;font-size:.85rem}.profile-bio{color:var(--text);white-space:pre-wrap;margin:0;padding:4px 24px 24px;line-height:1.7}.profile-modal .modal-actions{padding:0 24px 24px}.modal-overlay{z-index:10;background:#0f172a80;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--surface);border-radius:12px;flex-direction:column;gap:12px;width:100%;max-width:380px;max-height:90vh;padding:24px;display:flex;overflow-y:auto}.modal h2{margin:0 0 4px;font-size:1.1rem}.modal-photo-row{align-items:center;gap:14px;display:flex}.modal-photo-actions{flex-direction:column;align-items:flex-start;gap:6px;display:flex}.modal-photo-actions button:not(.link-button){border:1px solid var(--border);background:var(--surface);border-radius:6px;padding:6px 10px;font-size:.85rem}.field{color:var(--text-muted);flex-direction:column;gap:4px;font-size:.85rem;display:flex}.field input,.field select,.field textarea{font:inherit;color:var(--text);border:1px solid var(--border);background:var(--bg);resize:vertical;border-radius:6px;padding:8px}.modal-actions{justify-content:flex-end;gap:10px;margin-top:8px;display:flex}.modal-actions button{border:1px solid var(--border);background:var(--surface);border-radius:6px;padding:8px 16px}.modal-actions button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}@media (width<=480px){.tree{--anchor-magnitude:51px;--anchor-left-near:44px}.toolbar{padding:calc(10px + env(safe-area-inset-top)) 14px 10px;gap:10px}.toolbar-logo{height:22px}.toolbar-sublogo{height:36px}.toolbar-actions{gap:8px}.toolbar-actions button{padding:7px 10px;font-size:.8rem}.edit-toggle{padding:7px 10px;font-size:.85rem}.tree-scroll-area{padding:16px 0}.zoom-controls{margin:0 0 10px 12px}.person-card{width:88px;padding:6px}.avatar{width:38px;height:38px}.person-name{font-size:.76rem}.person-birthdate{font-size:.62rem}.modal{max-width:100%;padding:18px}.profile-modal-header{padding:24px 18px 20px}.birthday-sidebar{padding:0 14px 16px}}.splash{z-index:100;background:linear-gradient(160deg,#eaf2ff,#fdf6e3 75%);justify-content:center;align-items:center;animation:.6s 2.5s forwards splash-fade-out;display:flex;position:fixed;inset:0}.splash-scroll{aspect-ratio:290/275;width:min(76vw,300px);position:relative}.splash-roller{z-index:2;background:linear-gradient(#d3a862,#8a5a28);border-radius:999px;height:22px;position:absolute;top:50%;left:-14px;right:-14px;box-shadow:0 3px 8px #0000004d}.splash-roller-top{animation:.85s cubic-bezier(.22,1,.36,1) .15s forwards splash-roller-up}.splash-roller-bottom{animation:.85s cubic-bezier(.22,1,.36,1) .15s forwards splash-roller-down}.splash-paper{background:linear-gradient(#fbf3de,#f3e4bf);justify-content:center;align-items:center;height:0;animation:.85s cubic-bezier(.22,1,.36,1) .15s forwards splash-paper-grow;display:flex;position:absolute;top:50%;left:0;right:0;overflow:hidden}.splash-paper-art{opacity:0;width:82%;height:auto;animation:.5s .85s forwards splash-art-in}@keyframes splash-roller-up{to{top:0;transform:translateY(-50%)}}@keyframes splash-roller-down{to{top:100%;transform:translateY(-50%)}}@keyframes splash-paper-grow{to{height:calc(100% - 22px);top:11px}}@keyframes splash-art-in{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes splash-fade-out{to{opacity:0;visibility:hidden}}@media (prefers-reduced-motion:reduce){.splash,.splash-roller,.splash-paper,.splash-paper-art{animation:none!important}.splash{display:none}}