.wf-page { padding-bottom:24px; max-width:1920px; }
.wf-shell { --wf-accent:#e88b9d; --wf-ink:#f0eff0; --wf-muted:#9a9da9; --wf-line:rgba(202,199,210,.13); --wf-panel:#14151c; position:relative; isolation:isolate; display:grid; grid-template-columns:248px minmax(0,1fr); grid-template-rows:96px minmax(0,1fr) 49px; min-height:710px; height:calc(100svh - 167px); max-height:none; overflow:hidden; border:1px solid #292a32; border-radius:18px; color:var(--wf-ink); background:#0c0e14; box-shadow:0 22px 64px #10121f24; }
.wf-shell.has-selection { grid-template-columns:248px minmax(0,1fr) 326px; }
.wf-shell:fullscreen { height:100svh; min-height:0; max-height:none; width:100%; border:0; border-radius:0; }
.wf-shell [hidden] { display:none!important; }
.wf-shell * { box-sizing:border-box; }
.wf-shell h1,.wf-shell h2,.wf-shell h3,.wf-shell p { color:inherit; }
.wf-shell button,.wf-shell select,.wf-shell input { font:inherit; }
.wf-shell button,.wf-shell a,.wf-shell select,.wf-shell input { -webkit-tap-highlight-color:transparent; }
.wf-shell button:focus-visible,.wf-shell a:focus-visible,.wf-shell select:focus-visible,.wf-shell input:focus-visible,.wf-stage:focus-visible { outline:2px solid #f1a6b5; outline-offset:3px; }
.wf-shell button:disabled { opacity:.45; cursor:not-allowed; }
.wf-heading { grid-column:1/-1; grid-row:1; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 26px; z-index:5; border-bottom:1px solid var(--wf-line); background:linear-gradient(120deg,#1a161f,#101219 65%); }
.wf-title h1 { font:500 clamp(30px,2.8vw,44px)/1 Georgia,'Times New Roman',serif; letter-spacing:-1.6px; margin:0 0 8px; }
.wf-title h1 em { color:#efbcc2; background:linear-gradient(105deg,#f8ddd0,#e88ba4); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:400; }
.wf-title p { color:#a8a5ae; font-size:11px; line-height:1.4; margin:0; }
.wf-heading-actions { display:flex; align-items:center; gap:7px; }
.wf-stats { display:flex; align-items:center; gap:18px; margin-right:16px; color:var(--wf-muted); font-size:10px; white-space:nowrap; }
.wf-stats strong { display:block; font:500 22px/1.2 ui-sans-serif,system-ui,sans-serif; letter-spacing:-.7px; color:#efe9ec; font-variant-numeric:tabular-nums; }
.wf-stats>i { height:29px; width:1px; background:var(--wf-line); }
.wf-icon-button,.wf-button,.wf-profile-link { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; border:1px solid #45414d; border-radius:7px; padding:6px 10px; color:#ebe6ed; background:linear-gradient(135deg,#38303d,#24222b); font-size:11px; line-height:1.2; font-weight:500; text-decoration:none; cursor:pointer; transition:border-color .2s,background .2s,box-shadow .2s; }
.wf-icon-button { width:32px; padding:6px; flex:0 0 32px; }
.wf-icon-button i { font-size:17px; line-height:1; }
.wf-button i { font-size:15px; }
.wf-icon-button:hover,.wf-button:hover,.wf-profile-link:hover { color:white; border-color:#a86d85; background:linear-gradient(135deg,#554051,#332832); box-shadow:0 0 18px #d6738a14; }
.wf-icon-button[aria-pressed=true] { border-color:#d08c9f; color:#ffcfda; }
.wf-text-button { border:0; background:transparent; padding:4px 0; color:#f2afbd; font-size:11px; cursor:pointer; }
.wf-explorer { grid-column:1; grid-row:2; z-index:4; min-height:0; display:flex; flex-direction:column; background:linear-gradient(160deg,#17171f,#11141b); border-right:1px solid var(--wf-line); }
.wf-explorer-heading { display:flex; align-items:center; justify-content:space-between; padding:20px 18px 13px; font-size:11px; font-weight:600; letter-spacing:.25px; }
.wf-live-dot { height:5px; width:5px; border-radius:50%; background:#9ae0c1; box-shadow:0 0 9px #9ae0c172; }
.wf-search-wrap { display:flex; align-items:center; gap:7px; padding:9px 10px; margin:0 14px 14px; border:1px solid #49414d; border-radius:7px; background:#0c0d1499; }
.wf-search-wrap>i { color:#ad9cae; font-size:15px; }
.wf-search-wrap input { background:none; border:0; color:#f5f0f3; font-size:12px; min-width:0; width:100%; outline:none; }
.wf-search-wrap input::placeholder { color:#8a8593; }
.wf-filters { display:grid; grid-template-columns:1fr; gap:6px; padding:0 14px 15px; border-bottom:1px solid var(--wf-line); }
.wf-filters label { font-size:9px; letter-spacing:.6px; text-transform:uppercase; color:#92909f; margin-top:2px; }
.wf-filters select,.wf-lens select,.wf-path-select { min-width:0; width:100%; color:#ddd9e1; background:#202029; border:1px solid #3b3743; border-radius:6px; padding:7px 8px; font-size:11px; color-scheme:dark; }
.wf-filters select+label { margin-top:7px; }
.wf-list-heading { display:flex; justify-content:space-between; padding:15px 17px 9px; color:#86818f; font-size:10px; }
.wf-list { flex:1; min-height:0; overflow:auto; padding:0 7px 10px; scrollbar-width:thin; scrollbar-color:#514252 #15151c; }
.wf-list-item { display:flex; align-items:center; gap:10px; width:100%; min-height:59px; padding:8px 9px; background:transparent; border:1px solid transparent; border-radius:8px; color:#d7d3dd; text-align:left; cursor:pointer; text-decoration:none; transition:background .2s,border-color .2s; }
.wf-list-item img { width:36px; height:36px; flex-shrink:0; border-radius:50%; object-fit:cover; border:1px solid #5e4b5b; }
.wf-list-item:hover,.wf-list-item.is-selected { border-color:#9c697849; background:linear-gradient(110deg,#69405440,#42273716); color:#fff; }
.wf-list-item.is-selected { border-left-color:var(--wf-accent); box-shadow:inset 2px 0 var(--wf-accent); }
.wf-list-copy,.wf-neighbor-copy { display:block; min-width:0; flex:1; }
.wf-list-name { display:block; font-size:11px; font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
.wf-list-meta { display:block; font-size:9px; line-height:1.5; color:#97919f; margin-top:3px; }
.wf-list-item small { color:#9a90a1; font-size:9px; }
.wf-directory-link { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; border-top:1px solid var(--wf-line); padding:14px 17px; font-size:10px; color:#b7a7b7; }
.wf-directory-link:hover { color:#f6c0ce; }
.wf-stage { grid-column:2; grid-row:2; position:relative; min-width:0; min-height:0; overflow:hidden; outline-offset:-4px!important; background:radial-gradient(ellipse at 42% 48%,#25222c3b,transparent 70%),#0b0e15; touch-action:none; }
.wf-nebula { position:absolute; inset:-15%; pointer-events:none; opacity:.65; background:radial-gradient(ellipse at 72% 30%,#954c6530,transparent 37%),radial-gradient(ellipse at 22% 73%,#34687720,transparent 37%),radial-gradient(ellipse at 50% 50%,#5043581a,transparent 64%); filter:blur(22px); animation:wf-cloud-drift 30s ease-in-out infinite alternate; }
#wf-atmosphere,#wf-effects,#wf-graph { position:absolute; inset:0; width:100%; height:100%; }
#wf-atmosphere { z-index:0; pointer-events:none; opacity:.85; }
#wf-graph { z-index:1; }
#wf-effects { z-index:2; pointer-events:none; }
.wf-stage-shade { position:absolute; inset:0; pointer-events:none; z-index:3; box-shadow:inset 0 0 80px #0b0d155c; background:linear-gradient(180deg,#0c0e1550,transparent 15%,transparent 84%,#0c0e1580); }
.wf-stage-heading { position:absolute; left:22px; top:20px; display:flex; align-items:center; gap:9px; color:#c4b6c5; font-size:10px; letter-spacing:1px; text-transform:uppercase; z-index:3; pointer-events:none; max-width:calc(100% - 44px); }
.wf-stage-line { width:24px; height:1px; background:linear-gradient(90deg,#df90aa,transparent); }
.wf-stage-tools { position:absolute; left:18px; bottom:18px; z-index:4; display:flex; align-items:center; gap:8px; }
.wf-lens { display:flex; align-items:center; gap:8px; padding:5px 8px; border:1px solid #4d3f4e; border-radius:7px; background:#14121dd9; backdrop-filter:blur(12px); }
.wf-lens label { font-size:9px; color:#a999af; margin:0; }
.wf-lens select { border:0; background:transparent; padding:3px 0; font-size:10px; width:auto; }
.wf-map-controls { position:absolute; right:18px; bottom:18px; z-index:4; display:flex; gap:6px; }
.wf-explorer-toggle { display:none; }
.wf-inspector { grid-column:3; grid-row:2; z-index:5; min-height:0; display:flex; flex-direction:column; border-left:1px solid var(--wf-line); background:linear-gradient(160deg,#1d1821,#12141c 65%); animation:wf-detail-arrive .36s cubic-bezier(.2,.7,.2,1); }
.wf-inspector-heading { display:flex; align-items:center; justify-content:space-between; padding:12px 14px 6px 20px; flex-shrink:0; }
.wf-inspector-heading>span { font-size:9px; letter-spacing:1.8px; text-transform:uppercase; color:#bfa2b5; }
.wf-inspector-heading .wf-icon-button { background:transparent; border-color:transparent; }
.wf-detail-content { min-height:0; flex:1; overflow:auto; padding:12px 20px 24px; scrollbar-width:thin; scrollbar-color:#5b4253 #16131d; }
.wf-person-header { display:flex; gap:14px; align-items:center; margin-bottom:17px; min-width:0; }
.wf-portrait { width:76px; height:76px; object-fit:cover; flex-shrink:0; border-radius:50%; padding:3px; border:1px solid var(--wf-accent); box-shadow:0 0 28px #b36d8219; background:#12131b; }
.wf-detail-kicker { font-size:9px; text-transform:uppercase; letter-spacing:1.3px; color:#bb9eae; margin:0 0 6px; }
.wf-detail-name { margin:0 0 7px; font:500 23px/1.2 Georgia,'Times New Roman',serif; letter-spacing:-.3px; overflow-wrap:anywhere; }
.wf-detail-meta { color:#a29aac; font-size:10px; line-height:1.6; margin:0; }
.wf-detail-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:22px; }
.wf-profile-link { background:linear-gradient(115deg,#914c65,#542c46); border-color:#bc7a9355; }
.wf-section-title { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:600; letter-spacing:.7px; color:#c0acbe; text-transform:uppercase; margin:24px 0 12px; }
.wf-chip { border:1px solid #65516880; background:#4931493d; border-radius:20px; padding:3px 7px; font-size:9px; color:#c3a6bd; white-space:nowrap; }
.wf-neighbor-list { display:flex; flex-direction:column; gap:5px; }
.wf-neighbor { display:flex; align-items:center; gap:9px; width:100%; min-width:0; text-align:left; border:1px solid #58425340; border-radius:8px; background:linear-gradient(110deg,#3c2b3f2e,#25202f30); padding:9px; color:#d9cfdc; cursor:pointer; font-size:11px; }
.wf-neighbor:hover { border-color:#bd859166; background:#5a364839; color:#fff; }
.wf-neighbor img { height:32px; width:32px; object-fit:cover; border-radius:50%; flex-shrink:0; }
.wf-neighbor-copy strong { display:block; font-size:11px; line-height:1.4; font-weight:500; }
.wf-neighbor-copy small,.wf-neighbor-count { font-size:9px; color:#a391a8; }
.wf-perspective { padding:15px 13px; border:1px solid #6c4b6255; border-radius:10px; background:linear-gradient(140deg,#47304138,#181722); margin:0 0 13px; }
.wf-perspective-label { display:block; color:#f0bbc9; font-size:11px; line-height:1.5; font-weight:600; margin-bottom:12px; }
.wf-perspective-copy { color:#c3b9c9; font-size:12px; line-height:1.75; overflow-wrap:anywhere; }
.wf-perspective-copy :is(p,ul,ol,blockquote) { margin:0 0 10px; color:inherit; }
.wf-perspective-copy :last-child { margin-bottom:0; }
.wf-perspective-copy :is(ul,ol) { padding-left:20px; }
.wf-perspective-copy ul { list-style:disc; }.wf-perspective-copy ol { list-style:decimal; }
.wf-perspective-copy a { color:#edacc2; text-decoration:underline; }
.wf-perspective-copy img { max-width:100%; height:auto; border-radius:6px; }
.wf-perspective-copy table { max-width:100%; display:block; overflow:auto; }
.wf-lore-missing { font-size:11px; line-height:1.6; color:#92879b; font-style:italic; margin:0; }
.wf-path-form { display:flex; gap:7px; flex-wrap:wrap; }.wf-path-select { flex:1; min-width:120px; }
.wf-path-result { margin-top:12px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.wf-path-step { padding:5px 8px; background:#5b3b5140; border:1px solid #9760754d; color:#eac6d1; border-radius:6px; font-size:10px; cursor:pointer; }
.wf-footer { grid-column:1/-1; grid-row:3; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 20px; border-top:1px solid var(--wf-line); background:#11131b; font-size:9px; color:#92909f; z-index:6; }
.wf-legend { display:flex; align-items:center; gap:17px; flex-shrink:0; }.wf-legend>span { display:flex; align-items:center; gap:6px; }
.wf-color-dot { display:inline-block; width:7px; height:7px; border-radius:50%; border:1px solid #f0a6bb; box-shadow:0 0 7px #e599b040; }
.wf-line-key { display:inline-block; width:18px; height:1px; background:#b486a2; }
.wf-path-summary { display:flex; gap:8px; align-items:center; min-width:0; }.wf-path-summary span { overflow:hidden; text-overflow:ellipsis; }
.wf-interaction-hint { white-space:nowrap; font-size:9px; color:#747181; }
.wf-empty { position:absolute; left:50%; top:45%; width:min(320px,80%); transform:translate(-50%,-50%); text-align:center; z-index:4; }
.wf-empty>i { font-size:44px; color:#b77e96; margin-bottom:18px; }.wf-empty h2 { font:400 24px/1.2 Georgia,serif; margin-bottom:12px; }.wf-empty p,.wf-empty-copy { color:#a191a8; font-size:12px; line-height:1.6; padding:12px; }
.wf-status { position:absolute; bottom:61px; left:50%; transform:translateX(-50%); max-width:min(450px,80%); margin:0; padding:8px 14px; border:1px solid #81627560; border-radius:8px; background:#221c29ed; color:#dac6db; font-size:11px; z-index:9; pointer-events:none; }
.wf-status:empty { display:none; }.wf-page-note { margin:12px 3px 0; color:#747986; font-size:11px; line-height:1.6; }
.wf-noscript { position:absolute; bottom:70px; left:270px; right:20px; padding:16px; background:#211e2a; z-index:8; font-size:13px; }
.wf-shell.is-motion-paused .wf-nebula { animation-play-state:paused; }.wf-shell.is-fallback #wf-graph { display:none; }
@keyframes wf-cloud-drift { from { transform:translate(-2%,1%) rotate(-3deg); } to { transform:translate(3%,-1%) rotate(4deg); } }
@keyframes wf-detail-arrive { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
@media(min-width:1800px) { .wf-shell { grid-template-columns:270px minmax(0,1fr); }.wf-shell.has-selection { grid-template-columns:270px minmax(0,1fr) 350px; }.wf-heading { padding-inline:30px; }.wf-list-item { min-height:64px; }.wf-list-name { font-size:12px; }.wf-detail-content { padding:16px 24px 26px; } }
@media(max-width:1250px) { .wf-shell { grid-template-columns:220px minmax(0,1fr); }.wf-shell.has-selection { grid-template-columns:220px minmax(0,1fr) 280px; }.wf-stats { margin-right:5px; gap:12px; }.wf-heading { padding:16px 20px; }.wf-map-controls { bottom:16px; right:12px; }.wf-stage-tools { left:12px; bottom:60px; }.wf-detail-content { padding-inline:15px; }.wf-portrait { width:58px; height:58px; }.wf-detail-name { font-size:21px; } }
@media(max-width:991px) { .wf-shell,.wf-shell.has-selection { grid-template-columns:minmax(0,1fr); grid-template-rows:89px minmax(0,1fr) 45px; min-height:720px; }.wf-stage { grid-column:1; }.wf-explorer { position:absolute; top:89px; bottom:45px; left:0; width:260px; z-index:8; box-shadow:16px 0 30px #0005; transform:translateX(-105%); visibility:hidden; transition:transform .25s,visibility .25s; }.is-explorer-open .wf-explorer { transform:translateX(0); visibility:visible; }.wf-explorer-toggle { display:inline-flex; }.wf-stage-tools { bottom:15px; left:15px; }.wf-lens { max-width:165px; }.wf-inspector { position:absolute; top:89px; bottom:45px; right:0; width:300px; z-index:7; box-shadow:-20px 0 40px #05060980; }.has-selection .wf-map-controls { right:315px; }.has-selection .wf-lens { display:none; }.wf-stats { gap:10px; }.wf-title h1 { font-size:32px; }.wf-interaction-hint { display:none; }.wf-noscript { left:20px; } }
@media(max-width:600px) { .wf-shell,.wf-shell.has-selection { grid-template-rows:82px minmax(0,1fr) 42px; border-radius:12px; min-height:650px; height:calc(100svh - 140px); }.wf-heading { padding:14px; gap:8px; }.wf-title h1 { font-size:30px; letter-spacing:-1.1px; margin-bottom:5px; }.wf-title p { display:none; }.wf-heading-actions { gap:4px; }.wf-heading-actions .wf-icon-button { width:29px; min-height:29px; flex-basis:29px; }.wf-stats { display:none; }.wf-explorer { top:82px; bottom:42px; width:min(280px,86%); }.wf-inspector { left:0; right:0; top:auto; bottom:42px; width:100%; max-height:39%; border:0; border-top:1px solid #78536b88; border-radius:15px 15px 0 0; box-shadow:0 -18px 35px #05060965; }.wf-inspector-heading { padding-top:8px; }.wf-detail-content { padding:5px 17px 18px; }.wf-person-header { margin-bottom:12px; }.wf-portrait { width:54px; height:54px; }.wf-detail-name { font-size:22px; }.wf-detail-actions { margin-bottom:16px; }.wf-stage-heading { top:16px; left:16px; font-size:9px; }.wf-stage-tools { left:10px; bottom:12px; }.wf-map-controls { right:10px; bottom:12px; }.wf-lens { display:none; }.wf-map-controls .wf-button { font-size:0; padding:6px; min-width:32px; }.wf-map-controls .wf-button i { font-size:16px; }.has-selection .wf-map-controls { right:10px; bottom:calc(50% + 10px); }.has-selection .wf-stage-tools { bottom:calc(50% + 10px); }.wf-footer { padding:9px 12px; gap:9px; }.wf-legend { font-size:8px; gap:10px; }.wf-path-summary { font-size:8px; }.wf-path-summary span { max-width:120px; }.wf-page-note { font-size:10px; }.wf-status { bottom:54px; font-size:10px; }.has-selection .wf-status { bottom:calc(47% + 54px); }.wf-neighbor-list { gap:5px; }.wf-neighbor { padding:7px; } }
@media(prefers-reduced-motion:reduce) { .wf-shell *,.wf-shell *::before,.wf-shell *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Detail controls share the compact rhythm of the member interface. */
.wf-person-identity { min-width:0; }
.wf-path-section { margin:20px 0; padding:15px 0; border-block:1px solid var(--wf-line); }
.wf-path-label { display:block; flex-basis:100%; color:#afa0b4; font-size:10px; margin:9px 0 0; }
.wf-path-form { margin-top:7px; }
.wf-path-arrow { color:#a88b9e; font-size:12px; }
.wf-path-result>.wf-detail-meta { flex-basis:100%; margin:0 0 5px; }
.wf-path-reset { margin-top:5px; }
.wf-list-more { width:calc(100% - 12px); margin:8px 6px; border:1px solid #644a5d70; border-radius:7px; background:#37253650; color:#d9b8cb; padding:9px; font-size:10px; cursor:pointer; }
.wf-person-header .wf-portrait,.wf-neighbor .wf-portrait { border-color:var(--person-color,var(--wf-accent)); }
.wf-perspective-label { color:var(--person-color,#f0bbc9); }
.wf-neighbor.is-selected { border-color:var(--person-color,#af7089); background:#5c3d5140; }
.wf-path-summary { overflow:hidden; }
.wf-path-summary span { white-space:nowrap; }
.wf-status { bottom:98px; }
@media(max-width:600px) { .wf-status { bottom:94px; }.has-selection .wf-status { bottom:calc(47% + 95px); }.wf-path-section { margin:15px 0; padding:12px 0; } }

/* Keep mobile controls immediately above the measured detail sheet. */
@media(max-width:600px) {
  .has-selection .wf-stage-tools,.has-selection .wf-map-controls { bottom:calc(var(--wf-dock-height,313px) + 12px); }
  .wf-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
}

.wf-status.is-quiet { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.wf-explorer-close { display:none; }
@media(max-width:991px) { .wf-explorer-close { display:inline-flex; }.wf-explorer-heading .wf-live-dot { margin-left:auto; margin-right:12px; } }

/* Relationship hues are independent of the portrait's origin universe. */
.wf-type-badge { --relationship-color:#8290a6; display:inline-flex; align-items:center; gap:6px; width:fit-content; max-width:100%; margin:5px 0 9px; color:var(--relationship-color); font-size:10px; line-height:1.4; font-weight:500; }
/* .wf-type-badge::before { content:""; display:block; width:13px; height:2px; flex-shrink:0; border-radius:2px; background:var(--relationship-color); } */
.wf-neighbor .wf-type-badge { font-size:9px; margin:4px 0 0; }
.wf-type-note { margin:0 0 12px; }
.wf-legend-toggle { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:5px 0; min-height:28px; border:0; background:transparent; color:#c2b8c8; font-size:10px; white-space:nowrap; cursor:pointer; }
.wf-legend-toggle:hover,.wf-legend-toggle[aria-expanded=true] { color:#fff0f5; }
.wf-legend-toggle .wf-line-key { background:linear-gradient(90deg,#f4b860,#53bfa4,#f07878); height:2px; }
.wf-legend-toggle .bx { font-size:15px; transition:transform .18s; }
.wf-legend-toggle[aria-expanded=true] .bx { transform:rotate(180deg); }
.wf-type-legend { position:absolute; z-index:12; bottom:61px; left:18px; width:335px; max-width:calc(100% - 36px); max-height:calc(100% - 150px); overflow:auto; padding:16px; color:#ddd7e2; border:1px solid #65566c; border-radius:12px; background:linear-gradient(145deg,#23212d,#151720); box-shadow:0 12px 45px #0008; scrollbar-width:thin; }
.wf-type-legend-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.wf-type-legend h2 { margin:0; font-size:14px; font-weight:600; letter-spacing:.1px; }
.wf-type-legend .wf-icon-button { background:transparent; border-color:transparent; }
.wf-type-legend ul { display:grid; grid-template-columns:1fr 1fr; gap:11px 12px; list-style:none; margin:0 0 16px; padding:0; }
.wf-type-legend-entry { display:flex; align-items:center; gap:8px; min-width:0; font-size:11px; line-height:1.4; }
.wf-type-swatch { display:block; width:20px; height:3px; flex-shrink:0; border-radius:2px; background:var(--relationship-color); }
.wf-type-legend p { margin:10px 0 0; font-size:10px; line-height:1.6; color:#aaa1b3; }
@media(max-width:600px) { .wf-type-legend { bottom:53px; left:12px; max-width:calc(100% - 24px); padding:13px; }.wf-legend-toggle { font-size:9px; }.wf-legend { gap:10px; }.wf-type-legend-entry { font-size:10px; } }

/* Circular origin groups keep the map stable while a pair is explored. */
#wf-threads { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
#wf-graph { z-index:2; }
#wf-effects { z-index:3; }
.wf-stage-shade { z-index:4; }
.wf-stage-heading,.wf-stage-tools,.wf-map-controls { z-index:6; }
.wf-orbit-labels { position:absolute; inset:0; z-index:5; pointer-events:none; }
.wf-orbit-label { position:absolute; transform:translate(-50%,-50%); pointer-events:auto; border:0; border-radius:5px; padding:4px 3px; background:#10131bda; color:var(--sector-color,#e5ded3); font:500 10px/1.35 Georgia,serif!important; text-align:center; overflow-wrap:anywhere; cursor:pointer; transition:color .2s,background .2s; }
.wf-orbit-label:hover { background:#39313d; color:#fff; }
.wf-pair-hint { margin:16px 0 0; color:#b3a9ba!important; font-size:12px; line-height:1.7; }
.wf-shell .wf-open-conversation { display:flex; width:fit-content; max-width:100%; min-height:30px; margin:12px 0 0; padding:5px 10px; font-family:inherit; font-size:12px; font-weight:500; line-height:18px; }
.wf-inline-dialogue { margin:12px 0; white-space:pre-wrap; font:400 19px/1.65 Georgia,serif; overflow-wrap:anywhere; }
.wf-stage { background:radial-gradient(ellipse at 50% 50%,#252a433b,transparent 70%),#0e111c; }
.wf-nebula { opacity:.35; }
@media(min-width:992px) {
  .wf-shell,.wf-shell.has-selection { grid-template-columns:292px minmax(0,1fr); }
  .wf-shell.has-selection .wf-explorer { display:none; }
  .wf-inspector { grid-column:1; grid-row:2; border-left:0; border-right:1px solid var(--wf-line); }
  .wf-stage-tools { bottom:18px; }
  .wf-detail-content { padding:12px 20px 24px; }
}
@media(min-width:1800px) { .wf-shell,.wf-shell.has-selection { grid-template-columns:320px minmax(0,1fr); }.wf-orbit-label { font-size:12px!important; } }
@media(min-width:992px) and (max-width:1200px) { .wf-shell,.wf-shell.has-selection { grid-template-columns:258px minmax(0,1fr); }.wf-stage-tools { bottom:58px; } }
@media(max-width:600px) { .wf-orbit-label { font-size:9px!important; }.wf-stage-tools { z-index:6; } }

/* Roleverses brand controls; universe and relationship colors remain data-driven. */
.wf-shell { font-weight: 400; }
.wf-heading { background: linear-gradient(115deg, #42111d, #231016 60%, #151017); }
.wf-icon-button, .wf-button, .wf-profile-link { color: #fff; border-color: #bd3146; background: linear-gradient(115deg, #ce2842, #a60a15 55%, #7f080f); }
.wf-icon-button:hover, .wf-button:hover, .wf-profile-link:hover { color: #fff; border-color: #e85b70; background: linear-gradient(115deg, #b51b34, #8e0913 55%, #66070d); box-shadow: 0 0 18px #ce284222; }

/* Native popup menus need explicit colors, independent of OS light/dark defaults. */
.wf-shell .wf-lens label { color:#eee1e6; font-size:12px; font-weight:500; }
.wf-shell #wf-focus-mode { min-height:30px; padding:4px 8px; border:1px solid #66535d; background-color:#24212a; color:#f7f3f5; font-family:inherit; font-size:12px; font-weight:500; line-height:1.4; }
.wf-shell #wf-focus-mode option { background-color:#fff; color:#24191e; font-size:12px; font-weight:500; }