/* HAL stencil bugs v2 (Grok Bot 2026-10-21). Fixed layer only: zero layout shift. Leg/wing cycles run only while walking. */
.hb-layer{position:fixed;inset:0;z-index:2147480000;pointer-events:none;overflow:hidden;contain:strict}
.hb-bug{position:absolute;will-change:transform;pointer-events:none;transition:opacity .4s;--hb-shell-hi:#8b9aa7;--hb-shell-mid:#303a42;--hb-shell-low:#080a0c;--hb-shell-rim:#5d6b76;--hb-accent:#ff8a45;--hb-glow:#39ff88}
.hb-svg{width:100%;height:100%;display:block;overflow:visible;transform:rotateX(7deg);transform-origin:center 58%;filter:drop-shadow(0 8px 7px rgb(0 0 0/.48)) drop-shadow(0 1px 1px rgb(255 255 255/.25))}
.hb-svg .hb-ground{fill:rgb(0 0 0/.34);filter:blur(1.8px);transform:translate(2px,4px) scale(1.03,.66);transform-origin:center}
.hb-svg .hb-shell-hi{stop-color:var(--hb-shell-hi)}.hb-svg .hb-shell-mid{stop-color:var(--hb-shell-mid)}.hb-svg .hb-shell-low{stop-color:var(--hb-shell-low)}.hb-svg .hb-shell-rim{stop-color:var(--hb-shell-rim)}
.hb-svg .hb-surface-sheen{filter:url(#hb-depth-v5)}
.hb-svg .hb-shell-shape{fill:url(#hb-shell-v5);stroke:var(--hb-shell-rim);stroke-width:1.2;paint-order:stroke;stroke-linejoin:round}
.hb-svg .hb-specular{fill:url(#hb-specular-v5);stroke:none;opacity:.86;pointer-events:none}
.hb-svg .hb-panel,.hb-svg .hb-ridge{fill:none;stroke:rgb(244 239 228/.72);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.hb-svg .hb-ridge{stroke:var(--hb-accent);stroke-width:1.35;opacity:.8}
.hb-svg .hb-sensor{fill:var(--hb-glow);stroke:#07110d;stroke-width:.75;filter:drop-shadow(0 0 2px var(--hb-glow))}
.hb-svg .hb-sensor-hot,.hb-svg .hb-accent,.hb-svg .hb-beacon{fill:var(--hb-accent);filter:drop-shadow(0 0 2.5px var(--hb-accent))}
.hb-svg .hb-port{fill:#0a0c0f;stroke:rgb(244 239 228/.6);stroke-width:.75}
.hb-svg .hb-ocellus{fill:var(--hb-accent);stroke:#18121b;stroke-width:1}.hb-svg .hb-ocellus-core{fill:#0a0a0d;stroke:rgb(255 255 255/.5);stroke-width:.7}
.hb-svg .hb-mandible{fill:none;stroke:var(--hb-shell-rim);stroke-width:2;stroke-linecap:round}
.hb-svg .hb-leg-shadow{fill:none;stroke:rgb(0 0 0/.72);stroke-width:5.2;stroke-linecap:round;stroke-linejoin:round}
.hb-svg .hb-leg{fill:none;stroke:url(#hb-shell-v5);stroke-width:3.15;stroke-linecap:round;stroke-linejoin:round}
.hb-svg .hb-joint{fill:var(--hb-shell-mid);stroke:var(--hb-shell-hi);stroke-width:1}
.hb-svg .hb-l{transform-box:view-box;will-change:transform}
.hb-svg .hb-an{fill:none;stroke:var(--hb-shell-rim);stroke-width:2.1;stroke-linecap:round}.hb-svg .hb-tip{fill:var(--hb-accent);stroke:none}
.hb-svg .hb-ant-l{transform-box:view-box;transform-origin:32px 14px}
.hb-svg .hb-wing{transform-box:view-box}
/* v6 gait: each tripod owns a different keyframe, so Chrome cannot collapse the
   alternating groups into the same pose. Feet sweep and lift while travelling,
   then keep a small living tap during pauses. */
.hb-walk .hb-la{animation:hb-step-a var(--gd,.28s) cubic-bezier(.42,0,.58,1) infinite!important}
.hb-walk .hb-lb{animation:hb-step-b var(--gd,.28s) cubic-bezier(.42,0,.58,1) infinite!important}
.hb-run .hb-la{animation:hb-step-a var(--gd,.13s) linear infinite!important}
.hb-run .hb-lb{animation:hb-step-b var(--gd,.13s) linear infinite!important}
.hb-bug:not(.hb-walk):not(.hb-run) .hb-la{animation:hb-idle-leg-a 1.45s ease-in-out infinite alternate!important}
.hb-bug:not(.hb-walk):not(.hb-run) .hb-lb{animation:hb-idle-leg-b 1.45s ease-in-out infinite alternate!important}
@keyframes hb-step-a{0%{transform:rotate(-28deg) translateY(.8px)}35%{transform:rotate(-4deg) translateY(-2.4px) scale(1.08)}70%,100%{transform:rotate(28deg) translateY(.7px)}}
@keyframes hb-step-b{0%{transform:rotate(28deg) translateY(.7px)}35%{transform:rotate(8deg) translateY(.4px)}70%{transform:rotate(-28deg) translateY(.8px)}100%{transform:rotate(-4deg) translateY(-2.4px) scale(1.08)}}
@keyframes hb-idle-leg-a{from{transform:rotate(-5deg) translateY(0)}to{transform:rotate(6deg) translateY(-.8px)}}
@keyframes hb-idle-leg-b{from{transform:rotate(5deg) translateY(-.8px)}to{transform:rotate(-6deg) translateY(0)}}
.hb-moth .hb-wl{animation:hb-wing-left .82s cubic-bezier(.4,0,.6,1) infinite!important}.hb-moth .hb-wr{animation:hb-wing-right .82s cubic-bezier(.4,0,.6,1) infinite!important}
.hb-moth.hb-walk .hb-wl,.hb-moth.hb-run .hb-wl{animation-duration:.2s}.hb-moth.hb-walk .hb-wr,.hb-moth.hb-run .hb-wr{animation-duration:.2s}
@keyframes hb-wing-left{0%,100%{transform:rotate(5deg) scaleX(.96)}50%{transform:rotate(-18deg) translateX(3px) scaleX(.38)}}
@keyframes hb-wing-right{0%,100%{transform:rotate(-5deg) scaleX(.96)}50%{transform:rotate(18deg) translateX(-3px) scaleX(.38)}}
.hb-i-groom .hb-ant-l,.hb-i-talk .hb-ant-l{animation:hb-twitch .5s ease-in-out infinite alternate}
.hb-i-look .hb-ant-l{animation:hb-twitch 1.2s ease-in-out infinite alternate}
.hb-i-groom .hb-la{animation:hb-leg .18s ease-in-out 3 alternate}
.hb-i-nib .hb-svg{animation:hb-nib .28s steps(2) infinite}
@keyframes hb-twitch{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@keyframes hb-nib{50%{transform:translateY(-2px) scale(1.04)}}
.hb-climb .hb-ground{transform:translate(7px,7px) scale(.82,.58);fill:rgb(0 0 0/.4)}
.hb-bug.hb-hide{opacity:0}
.hb-bite{position:absolute;left:0;top:0;width:14px;height:14px;opacity:.85;transition:opacity 1.2s}
.hb-bite.hb-fade,.hb-say.hb-fade{opacity:0}
/* speech bubble: bone plastic, stencil type */
.hb-say{position:absolute;left:0;top:0;max-width:220px;padding:7px 11px;border-radius:12px;background:#ece7dc;color:#111214;font:600 13px/1.3 system-ui,sans-serif;
  box-shadow:0 6px 14px rgb(0 0 0/.35),inset 0 1px 0 #fff;border:1.5px solid #111214;transition:opacity .5s;animation:hb-pop .25s ease-out}
@keyframes hb-pop{from{opacity:0;scale:.85}to{opacity:1;scale:1}}
/* gentle mode (prefers-reduced-motion): bugs glide slowly without limb flicker or pop. */
.hb-gentle .hb-walk .hb-l,.hb-gentle .hb-run .hb-l{animation:none}
.hb-gentle .hb-moth .hb-wl,.hb-gentle .hb-moth .hb-wr{animation-duration:3s!important}
.hb-gentle .hb-say{animation:none}
/* toggle key: a small machined tab on the right edge; the only bug-owned hit target */
.hb-key{position:fixed;right:0;top:58%;z-index:2147480001;width:34px;height:44px;padding:8px 4px 8px 8px;border:0;border-radius:12px 0 0 12px;
  background:linear-gradient(180deg,#3a3c42,#1f2024);box-shadow:inset 0 1px 0 rgb(255 255 255/.2),0 6px 14px rgb(0 0 0/.4);cursor:pointer;opacity:.82;
  color:#ece7dc;font:600 11px/1 system-ui,sans-serif;transition:opacity .2s,transform .2s}
.hb-key .hb-body *{fill:#ece7dc!important;stroke:#111214!important}.hb-key .hb-leg,.hb-key .hb-an{stroke:#ece7dc!important}.hb-key .hb-ground{display:none}
.hb-key:hover,.hb-key:focus-visible{opacity:1;transform:translateX(-2px)}
.hb-key:focus-visible{outline:2px solid #ff8a45;outline-offset:2px}
.hb-key.is-off{opacity:.45}.hb-key-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hb-menu,.hf-panel{position:fixed;z-index:2147480002;color:#ece7dc;font:15px/1.45 system-ui,sans-serif;
  background:linear-gradient(180deg,#23262b,#15161a);border-radius:18px;box-shadow:inset 0 1px 0 rgb(255 255 255/.16),0 14px 30px rgb(0 0 0/.45);border:1px solid #3a3c42}
.hb-menu{right:42px;top:calc(58% - 70px);width:232px;padding:14px}
.hb-menu-h,.hf-h{margin:0 0 8px;font:700 12px/1.2 ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#ff8a45}
.hb-menu-s{margin:8px 0 0;font-size:13px;color:#bdb7ac}
.hb-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.hb-row select,.hf-in{background:#0b0c0e;color:#ece7dc;border:1px solid #3a3c42;border-radius:8px;min-height:36px;padding:4px 8px;font:inherit}
.hb-row input[type=checkbox]{width:20px;height:20px;accent-color:#ff8a45}
.hb-btn{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid #3a3c42;background:linear-gradient(180deg,#3a3c42,#1f2024);color:#ece7dc;font:600 14px/1 system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 1px 0 rgb(255 255 255/.2)}
.hb-btn--hot{background:#ff8a45;color:#0b0c0e;border-color:#ff8a45;width:100%;margin-top:6px}
.hb-btn:focus-visible{outline:2px solid #39ff88;outline-offset:2px}
.hf-panel{right:12px;bottom:12px;width:min(380px,calc(100vw - 24px));max-height:min(78vh,640px);overflow:auto;padding:16px}
.hf-close{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;background:none;color:#bdb7ac;font-size:22px;cursor:pointer}
.hf-bug{display:flex;gap:12px;align-items:center;margin:4px 0 10px}.hf-bug .hf-ic{width:44px;height:44px;flex:none;border-radius:12px;background:#ece7dc;padding:6px}
.hf-name{font-weight:700}.hf-sub{font-size:13px;color:#bdb7ac}
.hf-say{background:#0b0c0e;border-radius:12px;padding:10px 12px;margin:8px 0;border-left:3px solid #39ff88}
.hf-acts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.hf-acts .hb-btn{flex:1 1 auto}
.hf-talk{display:flex;gap:8px;margin-top:8px}.hf-talk .hf-in{flex:1;min-width:0}
.hf-tabs{display:flex;gap:6px;margin:0 0 10px}.hf-tabs button[aria-selected=true]{background:#ff8a45;color:#0b0c0e;border-color:#ff8a45}
.hf-tree{font:12px/1.5 ui-monospace,monospace;color:#bdb7ac;white-space:pre-wrap;margin:0}
.hf-note{font-size:12px;color:#bdb7ac;margin:8px 0 0}
.hf-q{margin:6px 0;padding-left:10px;border-left:2px solid #ff8a45}
@media (max-width:639px){.hb-bug{transform-origin:center}.hb-key{top:auto;bottom:calc(132px + env(safe-area-inset-bottom));width:30px;height:44px}.hb-menu{right:38px;top:auto;bottom:calc(120px + env(safe-area-inset-bottom))}.hf-panel{right:8px;left:8px;bottom:8px;width:auto}}
.hb-gentle .hb-key{transition:none}
@media print{.hb-layer,.hb-key,.hb-menu,.hf-panel{display:none}}

/* ---------- v5: visibly new jewel/metal creatures, optical depth and natural micro-motion ---------- */
.hb-beetle{--hb-shell-hi:#ffbf78;--hb-shell-mid:#9b431f;--hb-shell-low:#190b08;--hb-shell-rim:#ff7d3c;--hb-accent:#ffd166;--hb-glow:#71ffc1}
.hb-ant{--hb-shell-hi:#d7e0e7;--hb-shell-mid:#53616c;--hb-shell-low:#101419;--hb-shell-rim:#94a7b5;--hb-accent:#ff9c5a;--hb-glow:#d8fff0}
.hb-moth{--hb-shell-hi:#e2b7ff;--hb-shell-mid:#6f3d93;--hb-shell-low:#170b22;--hb-shell-rim:#c67cff;--hb-accent:#ffbd59;--hb-glow:#a6fff0}
.hb-spider{--hb-shell-hi:#8fffd0;--hb-shell-mid:#16735b;--hb-shell-low:#061b17;--hb-shell-rim:#43d9aa;--hb-accent:#ff8a45;--hb-glow:#55ffaf}
.hb-bot{--hb-shell-hi:#c9efff;--hb-shell-mid:#397890;--hb-shell-low:#071923;--hb-shell-rim:#72dfff;--hb-accent:#ff8a45;--hb-glow:#68f7ff}
.hb-svg .hb-body{transform-box:view-box;transform-origin:32px 36px}
.hb-walk .hb-body{animation:hb-bob var(--gd,.26s) ease-in-out infinite alternate!important}
.hb-run .hb-body{animation:hb-bob var(--gd,.12s) ease-in-out infinite alternate!important}
@keyframes hb-bob{from{transform:translateY(-.4px) scale(1.01,.99)}to{transform:translateY(.4px) scale(.99,1.01)}}
.hb-bug:not(.hb-walk):not(.hb-run) .hb-body{animation:hb-breathe 3.2s ease-in-out infinite!important}
@keyframes hb-breathe{50%{transform:scale(1.035)}}
.hb-svg .hb-eye{transform-box:fill-box;transform-origin:center;animation:hb-blink 5.5s infinite!important;fill:#fff8e6}
.hb-ant .hb-eye{animation-delay:1.3s}.hb-moth .hb-eye{animation-delay:2.1s}.hb-spider .hb-eye{animation-delay:3.4s;fill:#9dffc4}.hb-bot .hb-eye{animation:none}
@keyframes hb-blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.hb-bug .hb-ant-l{animation:hb-twitch 2.4s ease-in-out infinite alternate!important}
.hb-i-talk .hb-svg{animation:hb-chat .32s ease-in-out 6 alternate!important}
@keyframes hb-chat{to{transform:translateY(-1.5px) scale(1.05)}}
.hb-say{border-radius:14px 14px 14px 4px;background:linear-gradient(180deg,#fffaf0,#ece7dc)}
.hb-card{position:fixed;z-index:2147480002;right:12px;bottom:12px;width:min(360px,calc(100vw - 24px));padding:16px;color:#ece7dc;font:15px/1.45 system-ui,sans-serif;
  background:linear-gradient(180deg,#23262b,#15161a);border-radius:18px;box-shadow:inset 0 1px 0 rgb(255 255 255/.16),0 18px 40px rgb(0 0 0/.5);border:1px solid #3a3c42;animation:hb-pop .22s ease-out}
.hb-card .hf-ic .hb-svg{filter:none}.hb-card .hf-ic{animation:hb-breathe 3s ease-in-out infinite}
.hb-vc iframe{width:100%;height:300px;border:1px solid #3a3c42;border-radius:12px;background:#0b0c0e;display:block;margin-top:6px}
@media (max-width:639px){.hb-card{left:8px;right:8px;bottom:8px;width:auto}}
.hb-gentle .hb-l{animation:none!important;transform:none!important}.hb-gentle .hb-body,.hb-gentle .hb-eye,.hb-gentle .hb-ant-l{animation:none!important}
@media print{.hb-card{display:none}}