:root{--bg:#0b101f;--bg-raised:#131b30;--ink:#ece6d8;--ink-dim:#9a937f;--accent:#e0a458;--on-accent:#1a1206;--surface:#131b30d9;--surface-border:#ece6d824;--surface-hover:#ece6d81a;--viz-from:#18203a;--viz-to:#0b101f;--swatch-union:#e9e2d0;--swatch-ex:#a89e8c;--font-display:"Fraunces", Georgia, serif;--font-ui:"Inter", system-ui, sans-serif}:root[data-theme=light]{--bg:#efe9db;--bg-raised:#e3dcc9;--ink:#2a2620;--ink-dim:#8a8270;--accent:#b9701f;--on-accent:#fbf6ec;--surface:#faf7efd1;--surface-border:#28262029;--surface-hover:#28262012;--viz-from:#faf7ef;--viz-to:#e6ddc9;--swatch-union:#5c5446;--swatch-ex:#9a917e}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--ink);font-family:var(--font-ui);overscroll-behavior:none;margin:0}body{transition:background-color .4s,color .4s}.app{flex-direction:column;height:100%;display:flex;position:relative}.topbar{z-index:10;pointer-events:none;justify-content:space-between;align-items:center;padding:14px 18px;display:flex;position:absolute;inset:0 0 auto}.topbar h1{font-family:var(--font-display);letter-spacing:.02em;margin:0;font-size:1.25rem;font-weight:500}.topbar-right{pointer-events:auto;align-items:center;gap:10px;display:flex}.mode-toggle{background:var(--surface);border:1px solid var(--surface-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:3px;display:flex}.mode-toggle button{color:var(--ink-dim);font:600 .78rem/1 var(--font-ui);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:8px 14px}.mode-toggle button.active{background:var(--accent);color:var(--on-accent)}.theme-toggle{background:var(--surface);border:1px solid var(--surface-border);width:34px;height:34px;color:var(--ink-dim);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;place-items:center;transition:color .2s,border-color .2s;display:grid}.theme-toggle:hover{color:var(--ink);border-color:var(--ink-dim)}.auth-btn{border:1px solid var(--surface-border);background:var(--surface);color:var(--ink);font:600 .72rem/1 var(--font-ui);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:9px 14px}.auth-btn:hover{border-color:var(--ink-dim)}.share-menu{position:relative}.share-pop{background:var(--bg-raised);border:1px solid var(--surface-border);border-radius:14px;flex-direction:column;gap:4px;width:250px;padding:10px;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 10px 30px #00000059}.share-link-btn{border:1px solid var(--surface-border);color:var(--accent);font:600 .78rem var(--font-ui);cursor:pointer;background:0 0;border-radius:9px;padding:8px 10px}.share-link{font:.7rem var(--mono,monospace);border:1px solid var(--surface-border);background:var(--bg);color:var(--ink-dim);border-radius:8px;padding:7px 9px}.share-member{font:600 .78rem var(--font-ui);justify-content:space-between;align-items:center;gap:8px;padding:5px 4px;display:flex}.share-approve{background:var(--accent);color:var(--on-accent);font:600 .68rem var(--font-ui);cursor:pointer;border:0;border-radius:999px;padding:5px 9px}.invite-banner{z-index:30;border:1px solid var(--surface-border);background:var(--surface);max-width:min(92vw,460px);color:var(--ink);font:600 .8rem/1.4 var(--font-ui);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;text-align:left;border-radius:12px;padding:10px 16px;position:absolute;top:56px;left:50%;transform:translate(-50%)}.invite-dismiss{color:var(--ink-dim);margin-left:6px}.auth-overlay{z-index:50;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:auto;background:#00000073;place-items:center;display:grid;position:fixed;inset:0}.auth-card{background:var(--bg-raised);border:1px solid var(--surface-border);border-radius:16px;flex-direction:column;gap:12px;width:min(92vw,340px);padding:22px;display:flex}.auth-card h2{font-family:var(--font-display);margin:0;font-size:1.2rem;font-weight:500}.auth-card form{flex-direction:column;gap:8px;display:flex}.auth-card input{border:1px solid var(--surface-border);background:var(--bg);color:var(--ink);font:.85rem var(--font-ui);border-radius:10px;padding:10px 12px}.auth-card form button,.auth-google{background:var(--accent);color:var(--on-accent);font:600 .82rem var(--font-ui);cursor:pointer;border:0;border-radius:10px;padding:10px 12px}.auth-google{color:var(--ink);border:1px solid var(--surface-border);background:0 0}.auth-or{text-align:center;color:var(--ink-dim);font-size:.72rem}.auth-note{color:var(--ink-dim);margin:0;font-size:.85rem;line-height:1.5}.auth-error{color:#c9705d;margin:0;font-size:.78rem}.auth-close{color:var(--ink-dim);font:600 .72rem var(--font-ui);cursor:pointer;background:0 0;border:0;align-self:center}.stage{flex:1;min-height:0;position:relative}.stage-layer{position:absolute;inset:0}.viz{touch-action:none;background:radial-gradient(120% 90% at 50% 42%, var(--viz-from) 0%, var(--viz-to) 100%);width:100%;height:100%;transition:background .4s;display:block}.art-node,.nav-node{cursor:pointer}.label-name{font-family:var(--font-display);fill:var(--ink);font-size:8.5px}.decade-label{font-family:var(--font-ui);letter-spacing:.12em;fill:var(--ink-dim);opacity:.55;font-size:8px}.label-years{font-family:var(--font-ui);letter-spacing:.06em;fill:var(--ink-dim);font-size:6px}.nav-node .label-name{font-size:14.5px}.nav-node .label-years{font-size:10px}.nav-initial{font-family:var(--font-display);pointer-events:none;font-size:16px}.person-card{background:var(--surface);border:1px solid var(--surface-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;z-index:10;border-radius:14px;flex-direction:column;align-items:center;gap:3px;max-width:min(92vw,640px);padding:10px 18px;display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.person-card-main{align-items:baseline;gap:10px;display:flex}.person-card-relation{color:var(--accent);white-space:normal;text-align:center;font-size:.78rem}.person-card-relation span{color:var(--ink-dim)}.perspective-btn{border:1px solid var(--surface-border);color:var(--ink);font:600 .68rem/1 var(--font-ui);cursor:pointer;vertical-align:middle;background:0 0;border-radius:999px;margin-left:10px;padding:4px 9px}.perspective-btn:hover{background:var(--surface-hover)}.add-relative-bar{gap:6px;margin-top:2px;display:flex}.add-rel-btn{border:1px solid var(--surface-border);color:var(--accent);font:600 .7rem var(--font-ui);cursor:pointer;background:0 0;border-radius:999px;padding:5px 10px}.add-rel-btn:hover{background:var(--surface-hover)}.add-relative-form{flex-direction:column;gap:6px;width:240px;margin-top:4px;display:flex}.add-rel-title{color:var(--ink-dim);text-align:center;font-size:.72rem}.add-rel-tabs{justify-content:center;gap:4px;display:flex}.add-rel-tabs button{border:1px solid var(--surface-border);color:var(--ink-dim);font:600 .7rem var(--font-ui);cursor:pointer;background:0 0;border-radius:999px;padding:4px 12px}.add-rel-tabs button.active{background:var(--accent);color:var(--on-accent);border-color:#0000}.add-rel-list{flex-direction:column;gap:2px;max-height:180px;display:flex;overflow-y:auto}.add-rel-pick{text-align:left;color:var(--ink);font:600 .78rem var(--font-ui);cursor:pointer;background:0 0;border:0;border-radius:8px;padding:7px 9px}.add-rel-pick:hover{background:var(--surface-hover)}.add-relative-form>form{flex-direction:column;gap:6px;display:flex}.add-relative-form input,.add-relative-form select{border:1px solid var(--surface-border);background:var(--bg);color:var(--ink);font:.78rem var(--font-ui);border-radius:8px;padding:7px 9px}.add-rel-row{gap:6px;display:flex}.add-rel-row>*{flex:1}.add-rel-year{max-width:90px}.add-relative-form button[type=submit]{background:var(--accent);color:var(--on-accent);font:600 .78rem var(--font-ui);cursor:pointer;border:0;border-radius:8px;padding:7px 9px}.add-rel-cancel{border:1px solid var(--surface-border);color:var(--ink-dim);font:600 .78rem var(--font-ui);cursor:pointer;background:0 0;border-radius:8px}.add-rel-error{color:#c9705d;text-align:center;margin:0;font-size:.72rem}.person-actions{flex-direction:column;align-items:center;gap:6px;margin-top:2px;display:flex}.delete-btn{color:#c9705d;font:600 .72rem var(--font-ui);cursor:pointer;background:0 0;border:1px solid #c9705d80;border-radius:8px;padding:6px 9px}.delete-btn:hover{background:#c9705d1f}.relations-editor{flex-direction:column;gap:5px;width:270px;margin-top:4px;display:flex}.rel-row{align-items:center;gap:5px;display:flex}.rel-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font:600 .74rem var(--font-ui);flex:1;overflow:hidden}.rel-name em{color:var(--ink-dim);font-size:.66rem;font-style:normal;font-weight:400}.relations-editor select{border:1px solid var(--surface-border);background:var(--bg);color:var(--ink);font:.68rem var(--font-ui);border-radius:6px;padding:3px 4px}.rel-year{border:1px solid var(--surface-border);background:var(--bg);width:48px;color:var(--ink);font:.68rem var(--font-ui);border-radius:6px;padding:3px 4px}.rel-unlink{color:#c9705d;cursor:pointer;background:0 0;border:0;padding:2px 4px;font-size:.8rem}.person-card strong{font-family:var(--font-display);font-size:1rem;font-weight:500}.person-card span{color:var(--ink-dim);font-size:.78rem}.family-menu{z-index:11;position:absolute;bottom:14px;right:14px}.family-trigger{font:600 .72rem/1 var(--font-ui);color:var(--ink);background:var(--surface);border:1px solid var(--surface-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;border-radius:999px;max-width:60vw;padding:9px 14px;overflow:hidden}.family-pop{background:var(--bg-raised);border:1px solid var(--surface-border);border-radius:14px;flex-direction:column;gap:2px;width:240px;padding:8px;display:flex;position:absolute;bottom:calc(100% + 8px);right:0;box-shadow:0 10px 30px #00000059}.family-group{text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim);padding:8px 8px 4px;font-size:.62rem}.family-item{text-align:left;color:var(--ink);font:600 .8rem var(--font-ui);cursor:pointer;background:0 0;border:0;border-radius:9px;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;display:flex}.family-item:hover{background:var(--surface-hover)}.family-role{color:var(--ink-dim);font-size:.62rem}.family-new{color:var(--accent)}.family-empty{color:var(--ink-dim);padding:4px 10px 8px;font-size:.72rem}.family-create{flex-direction:column;gap:6px;padding:6px;display:flex}.family-create input{border:1px solid var(--surface-border);background:var(--bg);color:var(--ink);font:.8rem var(--font-ui);border-radius:8px;padding:8px 10px}.family-create button{background:var(--accent);color:var(--on-accent);font:600 .8rem var(--font-ui);cursor:pointer;border:0;border-radius:8px;padding:8px 10px}.family-error{color:#c9705d;margin:0;font-size:.72rem}.legend{z-index:11;color:var(--ink-dim);background:var(--surface);border:1px solid var(--surface-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;max-width:240px;padding:8px 12px;font-size:.72rem;position:absolute;bottom:14px;left:14px}.legend summary{cursor:pointer;color:var(--ink);font-weight:600}.legend-read{color:var(--ink-dim);margin:8px 0 10px;line-height:1.5}.legend-read strong{color:var(--ink)}.legend ul{gap:6px;margin:8px 0 2px;padding:0;list-style:none;display:grid}.legend li{align-items:center;gap:8px;display:flex}.swatch.line{border-top:2px solid var(--accent);flex:0 0 26px;height:0}.swatch.line.dotted{border-top-style:dotted}.swatch.line.dashed{border-top-style:dashed}.swatch.line.union{border-top-color:var(--swatch-union)}.swatch.line.ex{border-top-style:dashed;border-top-color:var(--swatch-ex);opacity:.6}.swatch.dot{background:var(--accent);border-radius:50%;flex:0 0 10px;height:10px}.swatch.dot.hollow{border:1.5px solid var(--accent);background:0 0}@media (width<=600px){.topbar{padding:10px 12px}.topbar h1{font-size:1.05rem}.mode-toggle button{padding:7px 11px;font-size:.72rem}.person-card{max-width:calc(100vw - 28px);bottom:72px}}