/* spider.css — spider, its webs and its speech bubble */
:root{--mute:#767676}
html.dark-mode{--mute:#8c8c8c}

#web{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
/* z-index 8: under the site's side buttons (10) so it never blocks the theme / flow toggles */
#sp{position:fixed;left:0;top:0;width:28.8px;height:28.8px;image-rendering:pixelated;z-index:8;touch-action:none;cursor:grab;
  transform-origin:50% 50%;will-change:transform;-webkit-touch-callout:none}
#sp:active{cursor:grabbing}
#sp:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
#sp[data-pal='noir']{filter:drop-shadow(0 0 1px rgba(var(--gc,150,125,255),.9)) drop-shadow(0 0 4px rgba(var(--gc2,130,100,255),.55));animation:spiderGlow var(--gd,4.5s) ease-in-out infinite;transition:filter 1.2s ease}
@keyframes spiderGlow{50%{filter:drop-shadow(0 0 1.5px rgba(var(--gc,170,150,255),1)) drop-shadow(0 0 7px rgba(var(--gc2,130,100,255),.8))}}
@media (prefers-reduced-motion:reduce){#sp[data-pal='noir']{animation:none}}

/* thought bubble: a scalloped cloud (svg) with a trail of three dots leading back to the spider */
.bubble{position:fixed;left:0;top:0;z-index:31;box-sizing:border-box;color:var(--ink);font-size:11px;font-family:'Roboto Mono', monospace;
  line-height:1.5;letter-spacing:.02em;max-width:300px;height:auto !important;opacity:0;transform:scale(.35);pointer-events:none;cursor:pointer;
  transition:opacity .2s ease,transform .2s ease}
.bubble.on{opacity:1;transform:scale(1);pointer-events:auto;
  transition:opacity .22s ease .2s,transform .42s cubic-bezier(.34,1.56,.64,1) .2s}
.cloud{position:relative;animation:thoughtBob 4.2s ease-in-out infinite}
.cloudbg{position:absolute;left:-7px;top:-7px;overflow:visible;pointer-events:none;filter:drop-shadow(2px 2px 0 var(--mute))}
.cloudbg path{fill:var(--bg);stroke:var(--ink);stroke-width:1;stroke-linejoin:round}
.tb{position:relative;padding:11px 18px 12px}
.bubble.mini .tb{padding:8px 13px 9px}
@keyframes thoughtBob{50%{transform:translateY(-2px)}}

.tdot{position:fixed;left:0;top:0;z-index:31;box-sizing:border-box;border-radius:50%;background:var(--bg);border:1px solid var(--ink);
  box-shadow:1px 1px 0 var(--mute);opacity:0;transform:scale(.2);pointer-events:none;transition:opacity .12s ease,transform .12s ease}
.tdot.on{opacity:1;transform:scale(1);transition:opacity .15s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
.tdot.d1.on{transition-delay:0s}
.tdot.d2.on{transition-delay:.08s}
.tdot.d3.on{transition-delay:.15s}
@media (prefers-reduced-motion:reduce){
  .bubble,.bubble.on,.tdot,.tdot.on{transform:none;transition:opacity .15s ease;transition-delay:0s}
  .cloud{animation:none}
}

.q-who{margin-top:8px;color:var(--mute);font-size:10px;letter-spacing:.05em}
.q-who:first-child{margin-top:0}
.bubble button{background:none;border:0;border-bottom:1px solid transparent;border-radius:0;margin:0;color:var(--mute);cursor:pointer;font-family:'Roboto Mono', monospace;font-size:11px;letter-spacing:.04em}
.bubble button:hover{color:var(--ink)}
.bubble button:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.q-ask{display:block;margin-top:9px;padding:2px 0;font-size:11px}

.q-menu{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.q-menu .q-ask{display:block;margin:0}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}