.hv-hive { --hv-ink: var(--c-ink, #1a2036); --hv-ink-2: var(--c-ink-2, #4a5270); --hv-surface: var(--c-surface, rgba(255, 255, 255, .72)); --hv-accent: var(--c-accent, #3d4fd1); --hv-accent-ink: var(--c-accent-ink, #ffffff); --hv-focus: var(--c-focus, #3d4fd1); --hv-edge: var(--edge, rgba(255, 255, 255, .72)); --hv-glass: var(--glass, blur(22px)); --hv-line: var(--line, 1px); --hv-sp-1: var(--sp-1, 4px); --hv-sp-2: var(--sp-2, 8px); --hv-sp-3: var(--sp-3, 12px); --hv-r-s: var(--r-s, 6px); --hv-r-m: var(--r-m, 12px); --hv-font: var(--f-ui, system-ui, sans-serif); --hv-fs: var(--fs-1, 13px); --hv-dur: var(--dur, 200ms); --hv-ease: var(--ease, cubic-bezier(0, 0, 0, 1)); --hv-tip-shadow: var(--sh-tip, 0 4px 16px rgb(0 0 0 / .18));
  --hv-shade: rgba(18, 28, 60, .22); --hv-shine: rgba(255, 255, 255, .16); --hv-slow: 300ms; --hv-bounce: cubic-bezier(.3, 1.6, .5, 1);
  position: fixed; inset: 0; z-index: 1; pointer-events: none; }
[data-hive-open].is-grown { position: relative; z-index: 2; transform: translate(var(--gx, 0px), var(--gy, 0px)) scale(1.39); transition: transform var(--hv-slow, 300ms) cubic-bezier(.3, 1.6, .5, 1); }
.hv-hex { position: absolute; left: var(--l, 0px); top: var(--t, 0px); width: 52px; height: 60px; display: block; color: var(--hv-ink); pointer-events: auto; opacity: 0; text-decoration: none;
  font: 500 var(--hv-fs) / 15px var(--hv-font); transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(.35); -webkit-tap-highlight-color: transparent;
  transition: transform var(--hv-slow) var(--hv-bounce), opacity var(--hv-dur) var(--hv-ease); transition-delay: calc(var(--i, 0) * 30ms); }
.hv-hive.is-open .hv-hex { opacity: 1; transform: none; }
.hv-s { position: absolute; inset: 0; filter: drop-shadow(0 4px 8px var(--hv-shade)); clip-path: var(--hex-shadow); }
.hv-s::before { content: ""; position: absolute; inset: 0; background: var(--hv-ink); clip-path: var(--hex-out); }
.hv-g { position: absolute; inset: 0; display: grid; place-items: center; transition: transform var(--hv-dur) var(--hv-ease); }
.hv-g::before, .hv-g::after { content: ""; position: absolute; }
.hv-g::before { inset: 0; background: var(--hv-edge); clip-path: var(--hex-ring); }
.hv-g::after { inset: 1px; background: var(--hv-surface); -webkit-backdrop-filter: var(--hv-glass); backdrop-filter: var(--hv-glass); clip-path: var(--hex-in); transition: background var(--hv-dur) var(--hv-ease); }
.hv-ic { position: relative; z-index: 1; width: 26px; height: 26px; display: block; }
.hv-hex.is-hot .hv-g, .hv-hex:focus-visible .hv-g { transform: scale(1.08); }
.hv-hex.is-hot .hv-g::after, .hv-hex:focus-visible .hv-g::after { background-color: var(--hv-accent); background-image: linear-gradient(180deg, var(--hv-shine), transparent 55%); }
.hv-hex.is-hot, .hv-hex:focus-visible { color: var(--hv-accent-ink); outline: 0; }
.hv-hex:focus-visible .hv-g { outline: 2px solid var(--hv-focus); outline-offset: 2px; }
.hv-n { position: absolute; padding: 0 var(--hv-sp-1); border-radius: var(--hv-r-s); background: var(--hv-surface); -webkit-backdrop-filter: var(--hv-glass); backdrop-filter: var(--hv-glass);
  color: var(--hv-ink); white-space: nowrap; opacity: 0; transition: opacity var(--hv-dur) var(--hv-ease); transition-delay: calc(var(--i, 0) * 30ms + 120ms); }
.hv-hive.is-open .hv-n { opacity: 1; }
.hv-n.n, .hv-n.s { left: 50%; transform: translateX(-50%); }
.hv-n.n { bottom: calc(100% + 2px); } .hv-n.s { top: calc(100% + 2px); }
.hv-n.e { left: calc(100% + 6px); top: 22px; } .hv-n.w { right: calc(100% + 6px); top: 22px; }
.hv-hive.is-compact .hv-n { display: none; }
.hv-tip { position: absolute; left: var(--tl, auto); right: var(--tr, auto); top: var(--tt, auto); bottom: var(--tb, auto); width: var(--tw, 320px); box-sizing: border-box;
  padding: var(--hv-sp-2) var(--hv-sp-3); border-radius: var(--hv-r-m); background: var(--hv-surface); -webkit-backdrop-filter: var(--hv-glass); backdrop-filter: var(--hv-glass); border: var(--hv-line) solid var(--hv-edge); box-shadow: var(--hv-tip-shadow);
  font-size: var(--hv-fs); line-height: 1.35; color: var(--hv-ink-2); pointer-events: none; opacity: 0; transition: opacity var(--hv-dur) var(--hv-ease); }
.hv-hive.is-open .hv-tip { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hv-hex, .hv-g, .hv-g::after, .hv-n, .hv-tip, [data-hive-open].is-grown { transition: none; transition-delay: 0s; }
  .hv-hex { opacity: 1; transform: none; } .hv-n, .hv-tip { opacity: 1; }
}
@media (forced-colors: active) {
  .hv-g::before { background: ButtonText; } .hv-g::after { background: ButtonFace; } .hv-n, .hv-tip { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .hv-s { display: none; }
}
@media print { .hv-hive { display: none; } }