/* Every type occupies its silhouette freely, with readable topic labels. */
.toc-dialog.toc-scattered{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--type-fg) transparent}
.toc-scattered .dialog-silhouette{height:var(--menu-canvas-height,100%)}
.toc-dialog.toc-scattered:not(.toc-scatter-fallback) .shape-dialog-content{inset:0;width:100%;height:var(--menu-canvas-height,100%);max-height:none;padding:0;transform:none;overflow:visible;pointer-events:none}
.toc-scattered:not(.toc-scatter-fallback) #toc-heading{position:absolute;width:160px;margin:0;font-size:44px;line-height:1.2;pointer-events:auto}
.toc-scattered:not(.toc-scatter-fallback) #toc-contents,.toc-scattered:not(.toc-scatter-fallback) .toc-list,.toc-scattered:not(.toc-scatter-fallback) .toc-list li{display:contents;border:0}
.toc-scattered:not(.toc-scatter-fallback) .toc-link{position:absolute;width:max-content;max-width:230px;min-height:48px;padding:8px 12px;font-size:20px;line-height:1.5;border:0;text-align:center;justify-content:center;pointer-events:auto}
.toc-scattered:not(.toc-scatter-fallback) .toc-link:hover{background:none;text-decoration:underline;text-underline-offset:6px}
.toc-dialog.toc-scattered:not(.toc-scatter-fallback) #guestbook-preview{position:absolute;width:210px;height:132px;margin:0;padding:8px 12px;border:0;pointer-events:auto}
.toc-dialog.toc-scattered .gb-preview-heading{font-size:20px}
.toc-scattered .gb-preview-lines{gap:4px}
.toc-scattered .gb-preview-empty{margin:0}
.toc-scatter-fallback #toc-heading,.toc-scatter-fallback .toc-link,.toc-scatter-fallback #guestbook-preview{left:auto!important;top:auto!important}
@media(max-width:700px){
  .toc-scattered:not(.toc-scatter-fallback) #toc-heading{width:140px;font-size:38px}
  .toc-scattered:not(.toc-scatter-fallback) .toc-link{max-width:170px;font-size:17px;padding:8px;min-height:44px}
  .toc-dialog.toc-scattered .gb-preview-heading{font-size:17px}
  .toc-dialog.toc-scattered:not(.toc-scatter-fallback) #guestbook-preview{width:174px;padding:8px;height:132px}
}

/* Float the lettering, keeping topic hit areas fixed and inside the 8px contour inset. */
.toc-dialog[open].toc-scattered:not(.toc-scatter-fallback) .toc-link>span,
.toc-dialog[open].toc-scattered:not(.toc-scatter-fallback) .gb-preview{
  --toc-float-x:3px;--toc-float-y:5px;
  animation:toc-float var(--toc-float-duration,8s) ease-in-out var(--toc-float-delay,-2s) infinite;
}
.toc-list li:nth-child(1){--toc-float-duration:7.6s;--toc-float-delay:-1.4s}
.toc-list li:nth-child(2){--toc-float-duration:9.2s;--toc-float-delay:-4.1s}
.toc-list li:nth-child(3){--toc-float-duration:8.4s;--toc-float-delay:-6.3s}
.toc-list li:nth-child(4){--toc-float-duration:10.6s;--toc-float-delay:-2.8s}
.toc-list li:nth-child(5){--toc-float-duration:9.8s;--toc-float-delay:-7.5s}
.toc-list li:nth-child(6){--toc-float-duration:7.2s;--toc-float-delay:-4.7s}
.toc-list li:nth-child(7){--toc-float-duration:11s;--toc-float-delay:-8.2s}
.toc-scattered .gb-preview{--toc-float-duration:12s;--toc-float-delay:-5.4s}
.toc-dialog[open].toc-scattered:not(.toc-scatter-fallback) .toc-link:is(:hover,:focus-visible,:active)>span,
.toc-dialog[open].toc-scattered:not(.toc-scatter-fallback) #guestbook-preview:is(:hover,:focus-within) .gb-preview,
body:has(#type-board:is(.motion-paused,.page-hidden)) .toc-dialog[open].toc-scattered:not(.toc-scatter-fallback) :is(.toc-link>span,.gb-preview){animation-play-state:paused}
@keyframes toc-float{
  0%,100%{transform:translate(calc(-1 * var(--toc-float-x)),2px)}
  35%{transform:translate(1px,calc(-1 * var(--toc-float-y)))}
  70%{transform:translate(var(--toc-float-x),var(--toc-float-y))}
}
@media(max-width:700px){
  .toc-dialog[open].toc-scattered:not(.toc-scatter-fallback) :is(.toc-link>span,.gb-preview){--toc-float-x:2px;--toc-float-y:4px}
}
@media(prefers-reduced-motion:reduce){
  .toc-dialog[open].toc-scattered:not(.toc-scatter-fallback) :is(.toc-link>span,.gb-preview){animation:none;transform:none}
}