.spider-hud {
  --hud-accent: var(--spider-accent, #e51d2b);
  --hud-soft: var(--spider-accent-soft, #65b9ff);
  position: fixed;
  top: max(74px, calc(env(safe-area-inset-top) + 58px));
  right: max(18px, calc(env(safe-area-inset-right) + 12px));
  z-index: 12;
  width: min(326px, calc(100vw - 36px));
  color: #f9f8f1;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  pointer-events: auto;
}
.spider-hud__shell { overflow: hidden; border: 1px solid color-mix(in srgb, var(--hud-accent) 54%, rgb(255 255 255 / 18%)); border-radius: 19px; background: linear-gradient(142deg, rgb(4 10 19 / 88%), rgb(7 8 13 / 77%)); box-shadow: 0 20px 60px rgb(0 0 0 / 35%), inset 0 1px 0 rgb(255 255 255 / 10%); -webkit-backdrop-filter: blur(15px) saturate(1.15); backdrop-filter: blur(15px) saturate(1.15); }
.spider-hud__topline,.spider-hud__head,.spider-hud__mode-row,.spider-hud__card,.spider-hud__hint { display: flex; align-items: center; }
.spider-hud__topline { justify-content: space-between; gap: 12px; padding: 12px 14px 8px; color: rgb(255 255 255 / 63%); font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.spider-hud__signal { display: inline-flex; align-items: center; gap: 6px; color: var(--hud-soft); }
.spider-hud__signal::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.spider-hud__head { gap: 9px; padding: 0 14px 13px; }.spider-hud__identity{flex:1;min-width:0}.spider-hud__title{font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;font-size:16px;font-weight:850;letter-spacing:.075em}.spider-hud__subtitle{margin-top:2px;color:rgb(255 255 255 / 52%);font-size:10px;letter-spacing:.09em}.spider-hud__audio{display:grid;width:34px;padding:0;color:rgb(255 255 255 / 55%);background:rgb(255 255 255 / 6%);border-radius:10px!important;place-items:center}.spider-hud__audio.is-active{color:var(--hud-soft);background:color-mix(in srgb,var(--hud-soft) 16%,rgb(255 255 255 / 8%))}
.spider-hud button { appearance: none; min-height: 34px; color: inherit; font: inherit; cursor: pointer; border: 0; }.spider-hud__collapse{display:grid;width:34px;padding:0;color:rgb(255 255 255 / 78%);background:rgb(255 255 255 / 8%);border-radius:10px!important;place-items:center}.spider-hud__collapse:hover,.spider-hud__mode:hover,.spider-hud__card:hover{background:rgb(255 255 255 / 14%)}
.spider-hud__content{display:grid;gap:9px;padding:0 10px 11px}.spider-hud.is-collapsed .spider-hud__content{display:none}.spider-hud__mode-row{gap:6px}.spider-hud__mode{flex:1;padding:0 10px;color:rgb(255 255 255 / 54%);font-size:10px!important;font-weight:760!important;letter-spacing:.07em;text-align:left;background:rgb(255 255 255 / 6%);border:1px solid rgb(255 255 255 / 8%)!important;border-radius:10px!important}.spider-hud__mode.is-active{color:#fff;background:color-mix(in srgb,var(--hud-accent) 38%,rgb(255 255 255 / 8%));border-color:color-mix(in srgb,var(--hud-accent) 75%,white 10%)!important;box-shadow:inset 0 0 16px color-mix(in srgb,var(--hud-accent) 28%,transparent)}
.spider-hud__abilities{display:grid;grid-template-columns:1fr 1fr;gap:6px}.spider-hud__card{position:relative;min-height:62px!important;gap:8px;padding:8px;color:rgb(255 255 255 / 80%);text-align:left;background:rgb(255 255 255 / 5%);border:1px solid rgb(255 255 255 / 7%)!important;border-radius:11px!important}.spider-hud__card--transform{grid-column:1 / -1}.spider-hud__card.is-live{color:#fff;border-color:var(--hud-accent)!important;background:color-mix(in srgb,var(--hud-accent) 20%,rgb(0 0 0 / 20%));box-shadow:0 0 16px color-mix(in srgb,var(--hud-accent) 30%,transparent)}.spider-hud__glyph{display:grid;flex:0 0 30px;width:30px;height:30px;color:var(--hud-soft);font-size:15px;font-weight:850;background:rgb(255 255 255 / 8%);border:1px solid rgb(255 255 255 / 10%);border-radius:50%;place-items:center}.spider-hud__card-name{display:block;font-size:11px;font-weight:800;letter-spacing:.04em}.spider-hud__card-step{display:block;margin-top:3px;color:rgb(255 255 255 / 47%);font-size:9px;line-height:1.25}
.spider-hud__hint{min-height:35px;gap:8px;padding:7px 9px;color:rgb(255 255 255 / 71%);font-size:10px;line-height:1.35;background:rgb(0 0 0 / 22%);border-radius:9px}.spider-hud__hint-key{flex:0 0 auto;color:var(--hud-soft);font-size:9px;font-weight:850;letter-spacing:.12em}
@media(max-width:680px){.spider-hud{top:auto;right:max(11px,env(safe-area-inset-right));bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px));width:min(370px,calc(100vw - 22px))}.spider-hud__shell{border-radius:16px}.spider-hud__topline{padding-top:9px}.spider-hud__head{padding-bottom:9px}.spider-hud__abilities{grid-template-columns:repeat(3,1fr)}.spider-hud__card{min-height:54px!important;align-items:flex-start;padding:7px}.spider-hud__glyph{flex-basis:25px;width:25px;height:25px;font-size:12px}.spider-hud__card-name{font-size:9px}.spider-hud__card-step{display:none}.spider-hud__card--transform{grid-column:auto}.spider-hud__hint{display:none}}
@media(max-width:390px){.spider-hud__subtitle{display:none}.spider-hud__abilities{gap:4px}.spider-hud__card{min-height:49px!important;padding:5px}.spider-hud__glyph{display:none}}@media(prefers-reduced-motion:reduce){.spider-hud *{transition:none!important}}