.indices-view{position:fixed;inset:0;z-index:6;pointer-events:auto;outline:0;color:var(--paper);font-family:var(--sans);--index-ink:var(--paper);--index-secondary:var(--muted);--index-line:#a7aaa0}
.indices-open .title-block{opacity:0!important}
.indices-open #gesture-hint{opacity:0!important;pointer-events:none}
.indices-heading{position:absolute;left:56px;top:calc(50% - 32px);width:235px}
.indices-eyebrow{font-size:8px;font-weight:500;line-height:1.7;letter-spacing:1.9px;color:var(--index-secondary);margin:0}
.indices-heading h2{font-family:var(--sans);font-size:42px;font-weight:600;line-height:1.1;letter-spacing:-1.9px;margin:14px 0 18px}
.indices-intro{font-size:12px;font-weight:400;line-height:1.8;white-space:pre-line;color:var(--index-secondary);margin:0}
.indices-graph{position:absolute;left:32%;right:8%;top:155px;bottom:165px;pointer-events:none;animation:indices-arrive .65s ease both}
.indices-connections{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.indices-edge{fill:none;stroke:var(--index-line);stroke-width:.7;vector-effect:non-scaling-stroke;opacity:.3;transition:opacity .25s,stroke .25s}
.indices-edge.is-active{opacity:.72;stroke:var(--paper)}
.has-active-index .indices-edge:not(.is-active){opacity:.13}
.indices-node{position:absolute;transform:translate(-50%,-50%);width:max-content;max-width:190px;min-width:118px;text-align:center;padding:5px 8px 6px;pointer-events:auto;color:var(--index-ink);cursor:pointer;background:none;border:0;font-family:var(--sans);outline:0}
.indices-point{display:block;position:relative;width:6px;height:6px;border:1px solid currentColor;border-radius:50%;margin:0 auto 13px;opacity:.78;transition:opacity .25s,box-shadow .25s}
.indices-point::after{content:'';position:absolute;inset:-5px;border:1px solid currentColor;border-radius:50%;opacity:.13}
.indices-node-text{display:block}
.indices-node-name{display:block;font-size:clamp(19px,1.9vw,27px);font-weight:600;letter-spacing:-.6px;line-height:1.15}
.indices-node-detail{display:block;margin-top:8px;font-size:10px;font-weight:400;letter-spacing:.1px;line-height:1.45;color:var(--index-secondary)}
.indices-node-count{display:block;margin-top:5px;font-size:8px;font-weight:400;letter-spacing:.8px;line-height:1.4;color:var(--index-secondary)}
.indices-node:hover,.indices-node:focus-visible{color:var(--paper)}
.indices-node:hover .indices-point,.indices-node:focus-visible .indices-point{opacity:1;box-shadow:0 0 12px #d4d9c134}
.indices-node:focus-visible .indices-node-name{outline:1px dotted var(--accent);outline-offset:7px}
.indices-back{position:absolute;left:56px;bottom:111px;display:flex;align-items:center;gap:15px;pointer-events:auto;font-family:var(--sans);color:var(--paper);padding:0;opacity:.84}
.indices-back>span:first-child{font-size:29px;font-weight:400;line-height:1}
.indices-back>span:last-child{font-size:9px;letter-spacing:.7px}
.indices-note{position:absolute;left:56px;bottom:80px;max-width:250px;font-size:8px;font-weight:400;line-height:1.7;letter-spacing:.45px;color:var(--index-secondary);margin:0}
.indices-view[data-empty='true'] .indices-intro,
.indices-view[data-pending-knots='true'] .indices-intro{display:block}
html[data-theme='day'] .indices-view{--index-line:#5f6756}
html[data-theme='day'] .indices-node:hover .indices-point,html[data-theme='day'] .indices-node:focus-visible .indices-point{box-shadow:0 0 12px #4b583b22}
html[data-writing='hand'] .indices-heading h2,html[data-writing='hand'] .indices-node-name{font-weight:400;letter-spacing:.1px}
html[data-writing='hand'] .indices-heading h2{font-size:48px}
html[data-writing='hand'] .indices-eyebrow{font-size:10px;letter-spacing:1px}
html[data-writing='hand'] .indices-intro{font-size:15px}
html[data-writing='hand'] .indices-node-name{font-size:clamp(23px,2.3vw,31px)}
html[data-writing='hand'] .indices-node-detail{font-size:13px;letter-spacing:0}
html[data-writing='hand'] .indices-node-count{font-size:11px;letter-spacing:.3px}
html[data-writing='hand'] .indices-back>span:last-child,html[data-writing='hand'] .indices-note{font-size:11px;letter-spacing:.2px}
@keyframes indices-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:1000px){.indices-heading{left:35px;width:190px}.indices-heading h2{font-size:35px}.indices-back,.indices-note{left:35px}.indices-graph{left:32%;right:6%}.indices-node{max-width:170px;min-width:106px}.indices-node-name{font-size:21px}.indices-node-detail{font-size:9px}html[data-writing='hand'] .indices-node-name{font-size:25px}}
@media(max-width:650px){
  .indices-heading{left:27px;right:27px;top:126px;width:auto}
  .indices-eyebrow{font-size:7px;letter-spacing:1.5px}
  .indices-heading h2{font-size:32px;letter-spacing:-1.2px;margin:10px 0 9px}
  .indices-intro{font-size:10px;line-height:1.65;white-space:normal;max-width:240px}
  .indices-graph{left:18px;right:18px;top:239px;bottom:165px}
  .indices-node{max-width:146px;min-width:106px;padding:4px 5px 5px}
  .indices-point{width:5px;height:5px;margin-bottom:10px}
  .indices-node-name{font-size:18px;letter-spacing:-.35px}
  .indices-node-detail{font-size:9px;max-width:136px;line-height:1.35;margin-top:6px}
  .indices-node-count{font-size:7px;letter-spacing:.5px;margin-top:4px}
  .indices-back{left:27px;bottom:118px;gap:10px}
  .indices-back>span:first-child{font-size:27px}
  .indices-back>span:last-child{font-size:8px}
  .indices-note{left:27px;bottom:90px;font-size:7px;max-width:220px}
  html[data-writing='hand'] .indices-heading h2{font-size:38px}
  html[data-writing='hand'] .indices-intro{font-size:13px}
  html[data-writing='hand'] .indices-eyebrow{font-size:9px;letter-spacing:.7px}
  html[data-writing='hand'] .indices-node-name{font-size:22px;line-height:1.1}
  html[data-writing='hand'] .indices-node-detail{font-size:11px;margin-top:5px}
  html[data-writing='hand'] .indices-node-count{font-size:9px;margin-top:3px}
  html[data-writing='hand'] .indices-back>span:last-child,html[data-writing='hand'] .indices-note{font-size:9px}
}
@media(max-width:650px) and (max-height:720px){.indices-heading{top:116px}.indices-heading h2{font-size:27px;margin-bottom:6px}.indices-intro{display:none}.indices-graph{top:202px;bottom:149px}html[data-writing='hand'] .indices-heading h2{font-size:31px}}
@media(max-width:650px) and (min-height:721px){html[data-writing='hand'] .indices-graph{top:270px}}
@media(max-width:650px) and (max-height:640px) and (orientation:portrait){
  .indices-heading{top:111px}
  .indices-heading h2{font-size:26px;margin-top:8px}
  .indices-graph{top:190px;bottom:135px;left:18px;right:18px}
  .indices-node{max-width:126px;min-width:98px;padding:3px 4px}
  .indices-point{width:4px;height:4px;margin-bottom:6px}
  .indices-node-name{font-size:15.5px;line-height:1.12;letter-spacing:-.2px}
  .indices-view[data-index-type='person'] .indices-node-name{white-space:nowrap}
  .indices-node-detail{max-width:118px;font-size:8px;line-height:1.3;margin-top:5px}
  .indices-node-count{display:none}
  .indices-back{bottom:92px}
  .indices-note{bottom:67px}
  html[data-writing='hand'] .indices-heading h2{font-size:29px}
  html[data-writing='hand'] .indices-node-name{font-size:18px;line-height:1.12;letter-spacing:0}
  html[data-writing='hand'] .indices-node-detail{font-size:9px;line-height:1.3;margin-top:4px}
}
@media(max-height:520px) and (orientation:landscape){
  .indices-heading{left:35px;top:120px;width:155px;right:auto}
  .indices-heading h2{font-size:30px;letter-spacing:-1.2px;margin:8px 0 10px}
  .indices-eyebrow{font-size:7px;letter-spacing:1.1px}
  .indices-intro{font-size:10px;line-height:1.6;white-space:normal;max-width:150px}
  .indices-graph{left:28%;right:4%;top:117px;bottom:91px}
  .indices-node{max-width:158px;min-width:98px;padding:3px 4px}
  .indices-point{width:4px;height:4px;margin-bottom:8px}
  .indices-node-name{font-size:18px;letter-spacing:-.35px}
  .indices-node-detail{font-size:8px;margin-top:5px;line-height:1.3}
  .indices-node-count{font-size:7px;margin-top:3px}
  .indices-back{left:35px;bottom:95px;gap:10px}
  .indices-back>span:first-child{font-size:25px}
  .indices-back>span:last-child{font-size:8px}
  .indices-note{left:35px;bottom:69px;max-width:170px;font-size:7px}
  html[data-writing='hand'] .indices-heading h2{font-size:34px}
  html[data-writing='hand'] .indices-eyebrow{font-size:8px}
  html[data-writing='hand'] .indices-intro{font-size:12px;line-height:1.4}
  html[data-writing='hand'] .indices-node-name{font-size:21px}
  html[data-writing='hand'] .indices-node-detail{font-size:10px}
  html[data-writing='hand'] .indices-node-count{font-size:8px}
  html[data-writing='hand'] .indices-back>span:last-child,html[data-writing='hand'] .indices-note{font-size:8px}
}
@media(max-width:650px) and (max-height:520px) and (orientation:landscape){.indices-heading{left:24px;top:106px;width:125px}.indices-heading h2{font-size:26px}.indices-intro{display:none}.indices-graph{left:29%;right:18px;top:115px;bottom:80px}.indices-node{max-width:110px;min-width:85px}.indices-node-name{font-size:15px}.indices-node-detail{display:none}.indices-back{left:24px;bottom:94px}.indices-note{left:24px;bottom:67px;max-width:120px}html[data-writing='hand'] .indices-heading h2{font-size:29px}html[data-writing='hand'] .indices-node-name{font-size:18px}}
@media(prefers-reduced-motion:reduce){.indices-graph{animation:none}.indices-edge,.indices-point{transition:none}}

.indices-view[data-index-type='person'] .indices-graph {
  display: grid;
  grid-template-columns: repeat(var(--people-columns, 1), minmax(0, 1fr));
  grid-auto-rows: minmax(min-content, 1fr);
  gap: 30px 5px;
  padding: 15px 3px;
  overflow: auto;
  scrollbar-width: thin;
  pointer-events: auto;
  touch-action: pan-y;
  cursor: grab;
}
.indices-view[data-index-type='person'] .indices-graph[hidden],
.indices-view[data-index-type='person'] .indices-connections { display: none; }
.indices-view[data-index-type='person'].is-turning .indices-graph,
.indices-view[data-index-type='person'].is-turning .indices-node {
  cursor: grabbing;
}
.indices-view[data-index-type='person'] .indices-graph:focus-visible {
  outline: 1px dotted var(--index-line);
  outline-offset: 9px;
}
.indices-view[data-index-type='person'] .indices-node {
  position: relative;
  display: grid;
  align-content: center;
  align-self: center;
  justify-self: center;
  width: calc(100% - 16px);
  max-width: 190px;
  min-width: 0;
  min-height: 44px;
  padding: 5px 4px;
  opacity: var(--name-opacity, 1);
  transform: translate(calc(var(--name-x, 0) * 8px), calc(var(--name-y, 0) * 12px));
}
.indices-view[data-index-type='person'] .indices-point {
  margin-bottom: 6px;
}
.indices-view[data-index-type='person'] .has-active-index .indices-node:not(.is-focused) {
  opacity: calc(var(--name-opacity, 1) * .88);
}
.indices-view[data-index-type='person'] .indices-node.is-focused {
  opacity: 1;
}
.indices-view[data-index-type='person'] .indices-node-name {
  overflow-wrap: break-word;
  white-space: normal;
  text-wrap: balance;
}
@media(max-width:650px) {
  .indices-view[data-index-type='person'] .indices-graph { gap: 8px 4px; padding-block: 8px; }
  .indices-view[data-index-type='person'] .indices-node {
    transform: translate(calc(var(--name-x, 0) * 8px), calc(var(--name-y, 0) * 3px));
  }
  .indices-view[data-index-type='person'] .indices-node-name { font-size: 15px; }
}
@media(max-width:650px) and (max-height:720px) and (orientation:portrait) {
  .indices-view[data-index-type='person'] .indices-heading { top: 145px; }
  .indices-view[data-index-type='person'] .indices-graph { top: 218px; }
}
@media(max-height:520px) and (orientation:landscape) {
  .indices-view[data-index-type='person'] .indices-graph { gap: 8px 5px; padding-block: 8px; }
  .indices-view[data-index-type='person'] .indices-node {
    transform: translate(calc(var(--name-x, 0) * 8px), calc(var(--name-y, 0) * 3px));
  }
  .indices-view[data-index-type='person'] .indices-node-detail { display: block; }
}
