page { background: #f8f6f0; color: #233f37; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; font-size: 14px; }
view, button, input { box-sizing: border-box; }
button { margin: 0; padding: 0; border: 0; border-radius: 0; font-size: inherit; line-height: inherit; background: transparent; color: inherit; }
button::after { border: 0; }
.page { padding: 25px 23px 35px; }
.brand-row, .between, .section-head, .person-head, .row { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; letter-spacing: 3px; }
.brand-mark { font-family: Georgia, serif; font-size: 33px; font-weight: 400; line-height: 1; color: #597965; }
.small-badge { font-size: 10px; letter-spacing: 1px; color: #6e7e70; border: 1px solid #dedfd3; padding: 5px 8px; border-radius: 20px; }
.eyebrow { display: block; color: #83917c; letter-spacing: 3px; font-size: 10px; text-transform: uppercase; }
.hero { margin-top: 0; }
.hero-title { display: block; font-family: 'Songti SC', STSong, SimSun, serif; font-size: 35px; font-weight: 500; line-height: 1.48; letter-spacing: 1px; margin-top: 0; }
.hero-description { display: block; color: #788176; font-size: 12px; line-height: 1.95; margin-top: 14px; }
.art { height: 204px; position: relative; overflow: hidden; margin: 10px -23px 8px; }
.art-glow { position: absolute; left: 16%; top: 18px; width: 230px; height: 170px; border-radius: 50%; background: radial-gradient(ellipse, #e6e9da, #f8f6f000 72%); }
.orbit { position: absolute; border: 1px solid #bac6b0; border-radius: 50%; width: 310px; height: 118px; top: 40px; left: 18px; transform: rotate(-23deg); }
.orbit.peach { border-color: #d6b5a4; top: 65px; left: 57px; transform: rotate(24deg); }
.orbit.inner { width: 245px; height: 88px; top: 64px; left: 51px; opacity: .28; }
.orb { position: absolute; border-radius: 50%; box-shadow: 0 7px 20px #233f3710; }
.orb.a { background: #799071; width: 15px; height: 15px; left: 68px; top: 119px; }
.orb.b { background: #c88d70; width: 12px; height: 12px; right: 68px; top: 107px; }
.orb.c { background: #e9debf; width: 6px; height: 6px; left: 199px; top: 56px; }
.orbit-word { position: absolute; left: 42%; top: 84px; font-family: 'Songti SC', STSong, serif; font-size: 20px; color: #65785e; letter-spacing: 6px; }
.orbit-caption { position: absolute; bottom: 5px; width: 100%; text-align: center; color: #8b9588; font-size: 9px; letter-spacing: 3px; }
.section-label { font-size: 11px; color: #7b8478; margin: 26px 0 12px; display: block; letter-spacing: 1px; }
.relationship-grid { display: flex; gap: 8px; }
.relation { flex: 1; min-width: 0; text-align: center; border: 1px solid #e4e4d9; border-radius: 14px; background: #fcfbf7; padding: 12px 2px 10px; color: #8b9184; font-size: 12px; }
.relation.active { background: #e8eddf; border-color: #94a386; color: #39543f; }
.relation-symbol { display: block; font-family: Georgia, serif; font-size: 24px; height: 32px; }
.relation-caption { color: #788374; font-size: 11px; margin: 12px 0 22px; min-height: 16px; text-align: center; }
.primary { display: block; background: #294d3e; color: #fffef4; font-size: 14px; border-radius: 13px; padding: 17px 16px; text-align: center; width: 100%; letter-spacing: 1px; }
.primary .arrow { float: right; }
.secondary { width: 100%; padding: 16px 8px; color: #6d7e68; text-align: center; font-size: 12px; }
.feature-row { display: flex; border-top: 1px solid #e3e5da; margin-top: 9px; padding-top: 22px; }
.feature { width: 33.333%; text-align: center; color: #637560; font-size: 11px; }
.feature + .feature { border-left: 1px solid #e3e5da; }
.feature-sub { display: block; color: #9a9f93; font-size: 9px; margin-top: 6px; }
.footnote { font-size: 10px; color: #959b8f; line-height: 1.8; text-align: center; margin-top: 24px; }
.back { font-size: 12px; color: #73816c; padding: 5px 0; text-align: left; }
.page-title { display: block; font-size: 28px; font-family: 'Songti SC', STSong, serif; line-height: 1.5; margin: 24px 0 8px; font-weight: 500; }
.subtitle { font-size: 12px; color: #7c8678; line-height: 1.9; display: block; }
.compact { margin: 20px 0; }
.compact .relation { padding: 10px 0; }
.person-card { background: #fffefa; border: 1px solid #e5e5da; border-radius: 18px; padding: 19px; margin: 15px 0; }
.person-card.warm { background: #fcf8f2; }
.person-head { margin-bottom: 17px; }
.person-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; }
.avatar { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 50%; background: #e5ebdd; color: #5c7654; font-size: 12px; }
.avatar.warm { background: #f0e0d3; color: #ad7f60; }
.field { display: block; margin: 15px 0; }
.field-label { display: block; font-size: 11px; color: #7c8678; margin-bottom: 8px; }
.input { display: block; width: 100%; min-height: 44px; border: 1px solid #e1e3d8; background: #fffefa; border-radius: 9px; padding: 10px 12px; font-size: 13px; color: #314e3c; line-height: 22px; }
.input.empty { color: #989e92; }
.input.disabled { opacity: .48; }
.check-row { display: flex; align-items: center; gap: 5px; color: #7f897a; font-size: 11px; margin-top: 9px; }
.check-row checkbox { transform: scale(.72); margin-left: -4px; }
.privacy { font-size: 11px; color: #87907f; line-height: 1.8; margin: 20px 2px; }
.error { font-size: 12px; line-height: 1.8; color: #a44b35; background: #f9eee7; border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.demo-banner { background: #efe9d9; color: #8b7951; font-size: 10px; line-height: 1.8; padding: 10px 13px; border-radius: 10px; margin: 22px 0; }
.report-heading { margin: 24px 0 13px; }
.report-title { font-family: 'Songti SC', STSong, serif; font-size: 29px; line-height: 1.5; margin: 8px 0; display: block; }
.people-line { display: flex; gap: 9px; align-items: center; font-size: 12px; color: #798674; }
.color-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #78946f; margin-right: 5px; }
.color-dot.warm { background: #c68f73; }
.divider { margin: 0 3px; color: #c9cdbd; }
.section-head { margin: 25px 0 14px; }
.section-title { font-size: 15px; font-weight: 500; }
.section-kicker { font-size: 9px; letter-spacing: 1px; color: #8a9681; }
.report-page { padding-left: 12px; padding-right: 12px; }
.alignment-note { font-size: 11px; line-height: 1.8; color: #859078; margin: 10px 0 16px; }
.independent-header { display: flex; color: #4b6541; font-size: 12px; line-height: 1.6; padding-bottom: 15px; }
.axis-heading { width: 12%; font-size: 10px; padding-top: 2px; }
.person-heading { width: 27%; padding: 0 7px; overflow-wrap: anywhere; }
.overlap-heading { width: 34%; padding: 0 9px; }
.timeline-subhead { display: block; font-size: 9px; line-height: 1.8; color: #8a957f; margin-top: 5px; font-weight: 400; }
.independent-board { display: grid; grid-template-columns: 12% 27% 27% 34%; grid-auto-rows: minmax(180px, auto); align-items: stretch; position: relative; }
.calendar-band { grid-column: 1 / 5; border-top: 1px dashed #dce1d2; pointer-events: none; min-width: 0; }
.calendar-year { display: block; padding-top: 9px; font-family: Georgia, serif; color: #798a69; font-size: 12px; }
.person-0 { grid-column: 2; }
.person-1 { grid-column: 3; }
.person-period { position: relative; min-width: 0; margin: 0 5px 10px 3px; padding: 16px 7px 48px 9px; background: #eaf0e1; border-left: 2px solid #8aa176; border-radius: 0 8px 8px 0; z-index: 1; overflow-wrap: anywhere; }
.person-period.person-1 { background: #f3e8dd; border-left-color: #c79c7a; }
.period-dot { position: absolute; left: -5px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #80986b; box-shadow: 0 0 0 2px #f8f6f0; }
.person-1 .period-dot { background: #c39572; }
.period-range { display: block; font-family: Georgia, serif; font-size: 11px; line-height: 1.7; color: #4e693e; font-weight: 600; }
.person-1 .period-range { color: #a27151; }
.period-age { display: block; color: #8b977e; font-size: 10px; line-height: 1.8; margin-top: 7px; }
.person-1 .period-age { color: #ad947e; }
.period-theme { display: block; font-size: 13px; line-height: 1.8; color: #506f3e; margin: 23px 0 10px; font-weight: 500; }
.person-1 .period-theme { color: #aa7754; }
.period-copy { display: block; font-size: 12px; line-height: 1.9; color: #77846a; }
.person-1 .period-copy { color: #9f8974; }
.period-bottom { position: absolute; left: 9px; bottom: 15px; font-size: 9px; color: #8a9b7a; }
.person-1 .period-bottom { color: #b09780; }
.period-gap { padding: 18px 9px; color: #a2aa96; font-size: 10px; line-height: 1.9; }
.overlap-card { grid-column: 4; min-width: 0; margin: 0 0 10px 4px; padding: 13px 7px 10px 9px; background: #fffdf6; border: 1px solid #e1e5d6; border-radius: 8px; z-index: 1; overflow-wrap: anywhere; }
.overlap-range { display: block; font-size: 10px; color: #8d987e; line-height: 1.8; }
.overlap-title { font-size: 13px; line-height: 1.8; font-weight: 500; color: #476239; margin: 10px 0 7px; }
.timeline-expand { display: block; width: 100%; padding: 12px 0 3px; min-height: 40px; font-size: 10px; line-height: 1.7; text-align: left; color: #678150; }
.timeline-question { border-top: 1px solid #d9e1cc; margin-top: 5px; padding-top: 8px; font-size: 11px; line-height: 1.9; color: #61784c; }
.timeline-question p, .timeline-question view { margin: 9px 0; }
.timeline-caption { color: #929b86; font-size: 10px; line-height: 1.9; margin-top: 13px; }
.timeline-end { text-align: center; font-size: 11px; letter-spacing: 2px; color: #8e997f; margin: 24px 0; }
.from-1 { grid-row-start: 1; }
.to-1 { grid-row-end: 1; }
.from-2 { grid-row-start: 2; }
.to-2 { grid-row-end: 2; }
.from-3 { grid-row-start: 3; }
.to-3 { grid-row-end: 3; }
.from-4 { grid-row-start: 4; }
.to-4 { grid-row-end: 4; }
.from-5 { grid-row-start: 5; }
.to-5 { grid-row-end: 5; }
.from-6 { grid-row-start: 6; }
.to-6 { grid-row-end: 6; }
.from-7 { grid-row-start: 7; }
.to-7 { grid-row-end: 7; }
.from-8 { grid-row-start: 8; }
.to-8 { grid-row-end: 8; }
.disclosure { margin-top: 21px; border: 1px solid #e2e5d8; border-radius: 11px; padding: 14px; background: #f5f4eb; }
.disclosure-button { text-align: left; width: 100%; font-size: 11px; color: #7f8b71; }
.disclosure-copy { font-size: 11px; line-height: 1.9; color: #87917d; margin-top: 12px; }
.report-footer { margin-top: 23px; }
.unlock-mask { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px 16px; background: rgba(30, 46, 36, .45); }
.unlock-panel { position: relative; width: 100%; max-width: 350px; max-height: 88vh; overflow-y: auto; background: #faf8f0; padding: 25px 24px 22px; border-radius: 23px; box-sizing: border-box; color: #294735; text-align: center; box-shadow: 0 22px 70px #10201730; }
.unlock-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; font-size: 24px; line-height: 40px; color: #8a947e; border-radius: 50%; }
.unlock-symbol { display: block; font-size: 36px; line-height: 1.2; color: #849a6f; margin: 1px 0 13px; }
.unlock-title { display: block; font-family: 'Songti SC', STSong, serif; font-size: 25px; line-height: 1.5; margin: 0 0 7px; font-weight: 500; }
.unlock-subtitle { display: block; font-size: 11px; line-height: 1.8; color: #87927a; }
.unlock-benefits { margin: 20px 0; text-align: left; padding: 12px 15px; border-radius: 10px; background: #edf0e3; }
.unlock-benefits text, .unlock-benefits span { display: block; font-size: 12px; color: #69805a; line-height: 2; }
.unlock-divider { color: #969f8c; font-size: 11px; margin: 20px 0 12px; }
.invite-input { text-align: center; letter-spacing: 1px; font-size: 12px; background: #fffdf7; }
.invite-submit { display: block; width: 100%; border: 1px solid #a8b798; border-radius: 10px; padding: 13px 5px; color: #5c7950; margin-top: 10px; font-size: 12px; background: #f3f5ea; }
.unlock-note { display: block; font-size: 10px; color: #969d8b; line-height: 1.8; margin-top: 17px; }
.unlock-error { text-align: left; font-size: 11px; }

.primary.invite-submit { background: #597951; color: #fff; border-color: #597951; }