/* Fur panel. The element is the panel: size and place it as the page needs.
   Colours can be changed through the custom properties below. */
.fur {
  --fur-sign: #FFFDF8;                    /* lettering and keys set into the fur */
  --fur-edge: #CFC9BF;                    /* their extruded side */
  --fur-glow: rgba(255, 253, 248, .6);    /* the light they throw on the hair below */
  --fur-bar: #111611;
  --fur-bar-ink: #F2F1EA;
  isolation: isolate;
}

/* fur behind the solids, spilt hair in front of them; fur.js sizes both */
.fur-back, .fur-front { position: absolute; top: 0; pointer-events: none; }
.fur-back { z-index: 0; }
.fur-front { z-index: 3; }

[data-fur-solid] {
  position: absolute; left: 0; top: 0; z-index: 1; margin: 0;
  user-select: none; -webkit-user-select: none;
}
.fur-draggable [data-fur-solid] { cursor: grab; touch-action: none; }

/* lit signage: flat, pale, no outline */
.fur-word {
  font-weight: 700; font-size: clamp(2.75rem, 11vw, 4.25rem); line-height: .9; font-stretch: 100%;
  letter-spacing: .1em; white-space: nowrap;
  color: var(--fur-sign);
}
.fur-baseline { display: inline-block; width: 0; height: 0; }
.fur-key {
  padding: .625rem 1.375rem; border: 0; background: var(--fur-sign);
  font-family: inherit; font-weight: 500; font-size: .875rem; line-height: 1.2; letter-spacing: .08em; color: #111611;
  box-shadow: 0 var(--fur-depth, 5px) 0 var(--fur-edge), 0 var(--fur-depth, 5px) 22px var(--fur-glow);
  transition: box-shadow .08s;
}
.fur-key:active {
  box-shadow: 0 1px 0 var(--fur-edge), 0 1px 14px var(--fur-glow);
  margin-top: calc(var(--fur-depth, 5px) - 1px);
}

/* the bar caps the panel like a window's title bar and hides the line of roots */
[data-fur-bar] {
  position: absolute; left: -3px; bottom: calc(100% - 1px); z-index: 2;
  display: flex; align-items: center; width: calc(100% + 6px); height: 1.75rem;
  margin: 0; padding: 0 .75rem; border: 0; border-radius: .5rem .5rem 0 0;
  background: var(--fur-bar);
  font-family: inherit; font-weight: 400; font-size: .75rem; line-height: 1; text-align: left; color: var(--fur-bar-ink);
  user-select: none; -webkit-user-select: none;
}
/* grown upward, the bar is the ground the blades stand on */
.fur-up [data-fur-bar] { bottom: auto; top: calc(100% - 1px); border-radius: 0 0 .5rem .5rem; }
.fur-movable [data-fur-bar] { cursor: grab; touch-action: none; }
.fur .fur-dragging { cursor: grabbing; }