:root{--bg:#f7f8fc;--ink:#202431;--muted:#687083;--line:#e2e5ee;--accent:#343a50;--control-border:#cbd0de}
body{background:radial-gradient(ellipse at 15% 15%,#e9e7ff88,transparent 40%),radial-gradient(ellipse at 90% 55%,#d7f6ef88,transparent 45%),var(--bg)}
.page-header{max-width:1160px;margin:auto;padding:28px 40px;display:flex;justify-content:space-between;align-items:center;background:transparent}.wordmark{text-decoration:none;font-size:29px;letter-spacing:-1.4px;font-weight:760;display:flex;align-items:center;gap:5px}.brand-dot{width:8px;height:8px;background:#b2c64a;border-radius:50%;align-self:flex-start;margin-top:6px}.header-note{font-size:10px;letter-spacing:2px;color:#747b8d;font-weight:650}.workspace-nav{display:flex;gap:6px;justify-content:center;margin:10px auto 28px}.workspace-nav button{border:0;background:transparent;padding:12px 22px;border-radius:30px;color:var(--muted);font-size:14px;font-weight:600}.workspace-nav button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 3px 18px #34415a0b}.workspace-nav button span{font-size:11px;border-radius:12px;background:#e7ebf4;padding:2px 6px;margin-left:3px}
.section-intro{text-align:center;margin:28px auto 30px;padding:0 20px}.eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:650;color:#77818f;margin-bottom:15px}.section-intro h2{font-size:38px;line-height:1.22;letter-spacing:-1.8px;font-weight:700}.section-intro>p:last-child{font-size:14px;color:var(--muted);margin-top:16px}.mode-switch{margin-bottom:22px}.mode-switch button{font-size:13px}#birth-form{max-width:780px}.people{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:12px;align-items:center}.person{padding:25px;border:1px solid #fff;border-radius:24px;box-shadow:0 10px 40px #4a56740a;background:#ffffffd9}.person h2::before{width:9px;height:9px;border-radius:50%;background:#c2bcf8}#person-b h2::before{background:#b8dacd}.swap-people{transform:none;width:36px;height:36px;background:#fff9;font-size:20px}.name-field input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:8px 0;font-size:17px;border-radius:0}.name-field label{font-size:12px}.name-field label span{margin-left:5px;font-size:11px}.save-person{width:100%;padding:12px;border:1px dashed #cbd1df;border-radius:10px;background:#f9faff;color:#535f77;font-size:12px;margin-top:16px}.primary{max-width:360px;border-radius:16px;min-height:52px}#calculate{background:#303747}.privacy{font-size:11px}.single .people{max-width:365px;margin:auto}.single .person-b{display:none}
#result-panel{padding:36px 0 60px;margin-top:36px}.result-heading,#results{max-width:1040px}.result-heading{text-align:center;margin-bottom:22px}.result-heading h2{font-size:25px;letter-spacing:-.8px}.result-heading p{font-size:12px}#results{gap:20px}.result-toolbar{display:flex;justify-content:center}.view-toggle{padding:4px;background:#e9ecf3;border-radius:14px;display:flex}.view-toggle button{border:0;border-radius:10px;padding:11px 20px;font-size:13px;color:#687083;background:transparent}.view-toggle button[aria-pressed=true]{background:#fff;box-shadow:0 2px 6px #34415a0b;color:var(--ink);font-weight:650}.layer-tabs{display:flex;justify-content:center;gap:8px;margin:0 auto;flex-wrap:wrap}.layer-tabs button{font-size:13px;background:transparent;color:#6a7182;border:1px solid transparent;border-radius:24px;padding:9px 22px}.layer-tabs button[aria-pressed=true]{border-color:#b7bfce;color:#202431;background:#fff9}.lens-stage{max-width:510px;width:100%;margin:auto}.explorer-card{--tint:#eef4cf;--halo:#e8edb7;position:relative;overflow:hidden;padding:28px;border:1px solid #fff;border-radius:28px;background:linear-gradient(150deg,var(--tint),#fffffff5 65%);box-shadow:0 12px 40px #3a4b6b0a}.explorer-card.blue{--tint:#dceefa;--halo:#d2eaf7}.explorer-card.pink{--tint:#f6e1ee;--halo:#f4dceb}.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.layer-label{font-size:12px;letter-spacing:.3px;padding:6px 12px;background:#fff9;border:1px solid #fff;border-radius:20px;font-weight:650}.layer-number{font-size:12px;color:#758083}.explorer-card h4{font-size:13px;font-weight:500;color:#586273;margin:0 0 5px}.layer-description{font-size:12px;color:#747e8f;margin-bottom:24px}.explorer-card .relation-name{font-size:33px;letter-spacing:-1.1px}.lens-people{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:44px;margin:24px 0 20px;padding:15px 0}.lens-person{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:13px;min-width:0;overflow-wrap:anywhere}.avatar{display:grid;place-items:center;width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff 0%,var(--halo) 80%);box-shadow:inset 0 0 0 1px #fff,0 8px 20px #5a6b8812;font-size:24px;font-weight:500;color:#56607a}.avatar-1{background:radial-gradient(circle at 30% 25%,#fff,#dce4f6 80%)}.lens-person strong{font-size:13px;border-radius:20px;background:#fff;padding:4px 15px;color:#414b60}.connection-mark{position:absolute;left:50%;top:56px;transform:translateX(-50%);font-size:25px;color:#8a95a5}.explorer-card .result-detail{background:transparent;border:0;border-top:1px solid #c9d1d955;border-radius:0;padding:16px 0 0;margin-top:12px;font-size:12px}.compare-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.compare-grid .explorer-card{padding:22px;display:flex;flex-direction:column}.compare-grid .relation-name{font-size:26px}.compare-grid .avatar{width:64px;height:64px;font-size:20px}.compare-grid .lens-people{gap:16px}.compare-grid .connection-mark{top:42px}.compare-grid .layer-description{min-height:40px}.open-lens{margin-top:auto;border:0;border-top:1px solid #cad0dc66;background:transparent;padding:18px 0 0;display:flex;justify-content:space-between;color:#505c70;font-size:12px}.compare-grid .result-detail{margin-bottom:18px}.result-bottom{text-align:center;margin-top:4px}.result-bottom p{font-size:12px;color:#7a8395;line-height:1.8}.quiet-button{border:1px solid #d4d9e5;background:#fff9;padding:12px 20px;border-radius:14px;font-size:12px;color:#4e596d;margin:16px auto 0}.result-bottom+.result-detail{max-width:510px;width:100%;margin:auto;background:transparent;font-size:12px}.possible-list{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.possible-option{padding:8px 10px;border-radius:12px;background:#fff;font-size:12px}.possible-title{font-size:24px!important}.single-results{max-width:510px;margin:auto;width:100%}
#map-panel{max-width:900px;margin:0 auto 70px;padding:0 24px}#map-panel .section-intro h2{font-size:32px}#map-canvas{position:relative;min-height:310px;border:1px solid #fff;border-radius:32px;background:radial-gradient(ellipse at 25% 30%,#e8e7fd99,transparent 60%),radial-gradient(ellipse at 80% 80%,#d5f4e599,transparent 60%),#ffffff80;overflow:hidden;padding:42px 24px;display:grid;place-items:center}.map-orbits{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.map-orbits i{position:absolute;width:230px;height:230px;border-radius:50%;border:1px solid #b5c2dd40}.map-orbits i:nth-child(2){width:420px;height:420px}.map-orbits i:nth-child(3){width:650px;height:650px}.map-nodes{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:28px 34px;max-width:700px}.map-node{border:0;background:transparent;width:98px;display:flex;align-items:center;flex-direction:column;gap:12px;color:#4c586b;font-size:12px}.map-node strong{max-width:100%;overflow-wrap:anywhere}.bubble{position:relative;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#dce2fcaa);box-shadow:inset 0 0 0 1px #fff,0 8px 20px #6b75a015;font-size:20px}.tone-1 .bubble{background:radial-gradient(circle at 30% 25%,#fff,#d3ece3aa)}.tone-2 .bubble{background:radial-gradient(circle at 30% 25%,#fff,#f4dce9aa)}.map-node[aria-pressed=true] .bubble{outline:2px solid #68768e;outline-offset:5px}.selection-index{position:absolute;bottom:0;right:0;font-size:11px;background:#485269;color:white;border-radius:50%;width:22px;height:22px;display:grid;place-items:center}.selection-index:empty{display:none}.empty-bubbles{display:flex;margin:0 0 22px}.empty-bubbles span{width:75px;height:75px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#fff,#d9e0f5);box-shadow:0 0 0 1px #fff;font-size:20px;color:#6d7991}.empty-bubbles span+span{margin-left:-12px;background:linear-gradient(135deg,#fff,#dceee6)}#map-canvas.empty{padding:40px 20px;text-align:center}#map-canvas h3{font-size:18px;margin-bottom:10px}#map-canvas p{font-size:13px;color:#7a8393}#map-selection{display:flex;justify-content:center;align-items:center;gap:20px;min-height:78px;padding:16px;font-size:14px}#map-selection small{display:block;font-size:10px;color:#7b8495}#map-selection p{font-size:12px;color:#778294}#map-selection b{color:#9ba4b3}.map-actions{text-align:center}.map-actions .primary{margin-top:0;background:#303747;color:#fff}.storage-note{text-align:center;font-size:11px;color:#818a9b;margin:20px}.saved-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line)}.saved-row small{display:block;color:#8790a0;font-size:11px}.delete-person{border:0;background:#fff;padding:8px 15px;border-radius:10px;color:#717c90;font-size:12px}#saved-people-list{max-width:500px;margin:28px auto;font-size:13px}#saved-people-list summary{cursor:pointer}#map-message{text-align:center;font-size:13px;color:#8a4054}
@media(max-width:700px){.page-header{padding:24px}.header-note{font-size:8px;letter-spacing:1.2px}.wordmark{font-size:26px}.section-intro{margin-top:25px}.section-intro h2{font-size:32px}.section-intro>p:last-child{font-size:13px}.people{grid-template-columns:minmax(0,1fr);gap:10px;max-width:390px;margin:auto}.swap-people{transform:rotate(90deg)}.person{padding:23px}.compare-grid{grid-template-columns:1fr;max-width:510px;width:100%;margin:auto}.compare-grid .layer-description{min-height:0}.compare-grid .lens-people{margin:14px 0}.compare-grid .explorer-card{padding:25px}.result-heading,#results{width:calc(100% - 32px)}.lens-stage .explorer-card{padding:26px}.layer-tabs button{padding:9px 17px}.view-toggle button{padding:10px 17px}#map-panel{padding:0 16px}.map-nodes{gap:26px 16px}.map-node{width:86px}.bubble{width:76px;height:76px}.workspace-nav{margin-bottom:20px}.result-heading h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
body:not(.single) #results{grid-template-columns:minmax(0,1fr);max-width:1040px;gap:20px}body:not(.single) .result-heading{max-width:1040px}
#orbit-dialog{width:min(540px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid white;border-radius:28px;padding:26px;background:linear-gradient(145deg,#f4f3ff,#f5faf8 70%);color:var(--ink);box-shadow:0 24px 100px #27355525}#orbit-dialog::backdrop{background:#27304455;backdrop-filter:blur(7px)}.orbit-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.orbit-header span{font-size:9px;letter-spacing:1.7px;color:#7d889c}.orbit-header button{border:0;border-radius:50%;background:white;width:36px;height:36px;font-size:25px;color:#5c687b}#orbit-title{font-size:24px;letter-spacing:-.9px}.orbit-intro{font-size:12px;color:#748094;margin-top:10px}.orbit-view{max-width:390px;margin:16px auto 0}#orbit-svg{display:block;width:100%;touch-action:none;cursor:grab;user-select:none}#orbit-svg:active{cursor:grabbing}#orbit-result{display:flex;justify-content:center;align-items:center;gap:30px;margin:0 auto 20px}#orbit-result div{display:flex;align-items:center;gap:10px;font-size:13px;overflow-wrap:anywhere}#orbit-result strong{padding:5px 12px;border-radius:20px;background:white}.orbit-arrow{color:#9aa5b6}.orbit-slider-label{display:flex;justify-content:space-between;font-size:12px;color:#738097}#orbit-position{width:100%;accent-color:#677b9a;min-height:32px}.orbit-controls{display:flex;gap:10px;justify-content:center;margin:12px 0 18px}.orbit-controls button{min-height:44px;border:1px solid #d7deea;background:white;border-radius:12px;padding:10px 16px;color:#4f5f78;font-size:12px}.orbit-note{font-size:11px;color:#7d889c;line-height:1.7;text-align:center}#open-orbit{display:block;background:#e8edfb;border-color:#d5ddef;margin:0 auto 20px}@media(max-width:500px){#orbit-dialog{padding:19px}#orbit-title{font-size:21px}.orbit-view{max-width:320px}#orbit-result{gap:15px}#orbit-result div{font-size:12px}}