.gp-site { min-height: 100vh; }
.gp-topbar { min-height: 72px; display: flex; align-items: center; gap: 38px; padding: 0 5vw; border-bottom: 1px solid rgba(80,63,42,.12); background: rgba(252,248,238,.9); }
.gp-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 205px; }.gp-brand-mark { color: #a08345; font-size: 28px; }.gp-brand strong { display: block; font: 700 24px Georgia,serif; }.gp-brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; letter-spacing: .18em; }
.gp-main-nav { display: flex; gap: 24px; flex: 1; font-size: 12px; color: var(--muted); }.gp-main-nav ul { display:flex; gap:24px; list-style:none; padding:0; margin:0; }.gp-main-nav a { text-decoration:none; }.gp-main-nav a:hover { color:var(--wine); }.gp-header-action { padding: 10px 15px; color: #fff; background: var(--wine); text-decoration:none; font-size:11px; font-weight:800; }.gp-header-action span { margin-left: 12px; }
.gp-page-shell { max-width: 1440px; margin: 0 auto; }.gp-hero { display:grid; grid-template-columns: 1fr 1fr; min-height: 405px; padding: 78px 8vw 60px; background: #f2e9d7; }.gp-hero-copy { max-width: 450px; }.gp-kicker { margin:0 0 14px; color:#987e53; font-size:10px; letter-spacing:.16em; font-weight:800; }.gp-hero h1, .gp-guide h2 { margin:0; font: 700 clamp(42px,5vw,70px)/.97 Georgia,serif; letter-spacing:-.04em; }.gp-hero h1 em, .gp-guide h2 em { color:var(--wine); font-weight:400; }.gp-hero-copy > p:not(.gp-kicker) { max-width: 360px; margin: 26px 0; color: var(--muted); font-size:14px; line-height:1.7; }.gp-primary-button { display:inline-flex; gap:24px; padding:14px 18px; color:#fff; background:var(--ink); font-size:11px; font-weight:800; text-decoration:none; }.gp-hero-art { position:relative; min-height: 260px; }.gp-art-ring { position:absolute; border:1px solid rgba(152,126,83,.4); border-radius:50%; transform:rotate(-19deg); }.gp-ring-one { inset: 5% 9% 4% 11%; }.gp-ring-two { inset: 12% 3% 12% 20%; border-color:rgba(150,51,61,.4); }.gp-art-leaf { position:absolute; inset:0; display:grid; place-items:center; color:#a08345; font-size:100px; transform:rotate(18deg); }
.gp-tree-section { padding: 54px 5vw 80px; background:var(--paper); }.gp-section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }.gp-section-heading h2 { margin:0; font:700 34px Georgia,serif; }.gp-section-note { max-width:360px; margin:0; color:var(--muted); font-size:11px; line-height:1.6; text-align:right; }
.gp-tree-app { position:relative; border:1px solid var(--line); background:#fbf7ed; box-shadow:0 16px 34px rgba(69,50,27,.07); overflow:hidden; }.gp-tree-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 18px; border-bottom:1px solid var(--line); }.gp-search { display:flex; align-items:center; gap:8px; width:min(300px,100%); padding:9px 12px; border:1px solid var(--line); background:#fffaf1; color:#988b79; }.gp-search input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:12px; }.gp-tree-actions { display:flex; align-items:center; gap:9px; }.gp-count { color:var(--muted); font-size:11px; }.gp-count strong { color:var(--ink); }.gp-zoom-control { display:flex; align-items:center; border:1px solid var(--line); background:#fffaf1; }.gp-zoom-control button, .gp-fit-button { min-width:33px; height:32px; border:0; background:transparent; color:var(--muted); cursor:pointer; }.gp-zoom-control span { min-width:45px; text-align:center; color:var(--muted); font-size:10px; }.gp-fit-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 10px; border:1px solid var(--line); background:#fffaf1; font-size:10px; font-weight:800; }.gp-zoom-control button:hover, .gp-fit-button:hover { color:var(--wine); }
.gp-generation-filter { display:flex; gap:3px; padding:10px 18px; overflow-x:auto; border-bottom:1px solid var(--line); }.gp-generation-filter button { padding:5px 9px; border:0; border-bottom:1px solid transparent; background:transparent; color:var(--muted); font-size:10px; cursor:pointer; white-space:nowrap; }.gp-generation-filter button.is-active { border-color:#a08345; color:var(--ink); background:#f3ead8; }
.gp-viewport { position:relative; height:min(650px, 72vw); min-height:430px; overflow:hidden; touch-action:none; overscroll-behavior:contain; background-color:#fbf7ed; background-image:radial-gradient(#d8cbb8 .8px,transparent .8px); background-size:19px 19px; }.gp-canvas { position:absolute; left:0; top:0; width:1050px; height:790px; transform-origin:0 0; transition:transform 180ms cubic-bezier(.23,1,.32,1); }.gp-viewport.is-panning .gp-canvas { transition:none; }.gp-connections { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }.gp-connections path { fill:none; stroke:#6d8066; stroke-width:2.2; opacity:.8; }.gp-member-card { position:absolute; left:var(--card-x); top:var(--card-y); width:176px; min-height:98px; display:flex; align-items:center; gap:9px; padding:12px; border:1px solid #dfd2c0; border-radius:2px; background:rgba(255,252,244,.94); color:var(--ink); text-align:left; box-shadow:0 6px 13px rgba(69,50,27,.06); cursor:pointer; transform:translateZ(0); transition:box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease; }.gp-member-card:hover, .gp-member-card:focus-visible { z-index:2; border-color:#a08345; box-shadow:0 12px 24px rgba(69,50,27,.14); transform:translateY(-2px); outline:0; }.gp-avatar, .gp-profile-avatar { flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:#e5d8c5; color:#8a6d42; font:700 12px Georgia,serif; }.gp-avatar img { width:100%; height:100%; object-fit:cover; }.gp-card-copy { min-width:0; display:grid; gap:3px; }.gp-card-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 13px Georgia,serif; }.gp-card-copy small { color:var(--muted); font-size:9px; }.gp-generation-badge { position:absolute; bottom:6px; left:10px; color:#a08345; font-size:9px; }.gp-signature { position:absolute; right:24px; bottom:16px; color:#b29f83; font:700 10px Georgia,serif; letter-spacing:.12em; }.gp-empty-state { padding:80px 22px; text-align:center; color:var(--muted); }.gp-empty-state strong { color:var(--ink); font:700 20px Georgia,serif; }.gp-empty-state p { font-size:12px; }
.gp-profile { display:none; position:absolute; z-index:3; right:0; bottom:0; width:min(320px,100%); min-height:300px; padding:28px 24px; border-left:1px solid var(--line); background:#fffaf1; box-shadow:-10px 0 30px rgba(69,50,27,.1); }.gp-profile.is-open { display:block; }.gp-profile-close { position:absolute; right:15px; top:12px; border:0; background:transparent; font-size:22px; color:var(--muted); cursor:pointer; }.gp-profile h3 { margin:20px 0 6px; font:700 26px Georgia,serif; }.gp-profile > p:not(.gp-kicker) { color:var(--muted); font-size:11px; }.gp-profile dl { display:grid; gap:14px; margin-top:25px; }.gp-profile dt { color:#a08345; font-size:9px; letter-spacing:.12em; }.gp-profile dd { margin:4px 0 0; color:var(--ink); font-size:12px; line-height:1.5; }
.gp-guide { max-width:620px; padding:80px 8vw 110px; }.gp-guide h2 { font-size:44px; }.gp-guide > p:not(.gp-kicker) { color:var(--muted); font-size:14px; line-height:1.8; }.gp-footer { display:flex; justify-content:space-between; padding:28px 5vw; color:var(--muted); border-top:1px solid var(--line); font-size:11px; }.gp-footer a { text-decoration:none; }
@media (max-width:700px) { .gp-topbar { min-height:62px; gap:12px; padding:0 16px; }.gp-brand { min-width:0; flex:1; }.gp-brand strong { font-size:18px; }.gp-brand small { font-size:6px; }.gp-main-nav { display:none; }.gp-header-action { padding:9px 10px; font-size:9px; }.gp-hero { grid-template-columns:1fr; min-height:0; padding:50px 22px 34px; }.gp-hero-art { min-height:180px; }.gp-art-leaf { font-size:70px; }.gp-tree-section { padding:38px 12px 54px; }.gp-section-heading { display:block; }.gp-section-heading h2 { font-size:28px; }.gp-section-note { margin-top:8px; text-align:left; }.gp-tree-toolbar { flex-wrap:wrap; padding:12px; }.gp-search { width:100%; }.gp-tree-actions { width:100%; justify-content:space-between; gap:5px; }.gp-count { margin-right:auto; }.gp-fit-label { display:none; }.gp-fit-button { width:34px; padding:0; }.gp-viewport { height:70vh; min-height:430px; }.gp-canvas { transition-duration:220ms; }.gp-member-card { width:164px; min-height:88px; padding:10px; }.gp-guide { padding:58px 22px 70px; }.gp-guide h2 { font-size:34px; }.gp-footer { display:block; padding:22px; }.gp-footer p:last-child { margin-top:14px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }