/* KSPORT — Halloween spider (pairs with assets/js/halloween.js) */
.hw-canvas { position: fixed; inset: 0; z-index: 2147483000; width: 100%; height: 100%; pointer-events: none; }
.hw-web { position: fixed; top: 0; inset-inline-start: 0; z-index: 56; width: clamp(110px, 16vw, 210px); height: auto; color: var(--ink, #111); opacity: .3; pointer-events: none; }
.hw-web--end { inset-inline-start: auto; inset-inline-end: 0; transform: scaleX(-1); }
html[dir="rtl"] .hw-web { transform: scaleX(-1); }
html[dir="rtl"] .hw-web--end { transform: none; }
.hw-toggle {
  position: fixed; bottom: 1.5rem; inset-inline-end: 1.5rem; z-index: 2147483001;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line, #ddd); border-radius: 50%;
  background: var(--bg, #fff); color: var(--muted, #666); box-shadow: 0 6px 18px rgba(0, 0, 0, .15); cursor: pointer;
  transition: color .2s, transform .2s, background .2s;
}
.hw-toggle svg { width: 1.375rem; height: 1.375rem; }
.hw-toggle[aria-pressed="true"] { color: #ff6a00; }
.hw-toggle:hover { transform: scale(1.08); }
.hw-toggle:focus-visible { outline: 2px solid #ff6a00; outline-offset: 2px; }
@media (max-width: 768px) { .hw-toggle { bottom: 5rem; } }
@media print { .hw-canvas, .hw-web, .hw-toggle { display: none !important; } }