main.l00k.--bi.--slider {
  container-type: inline-size;
}

main.l00k.--bi.--slider article {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

@media only screen and (width <= 969px) {
  main.l00k.--bi.--slider.w__l00k__nav article {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
  }
}

@media only screen and (orientation: portrait) {
  main.l00k.--bi.--slider article {
    grid-template-rows: 1fr 1fr min-content;
    grid-template-columns: 1fr;
  }

  main.l00k.--bi.--slider article > section:nth-of-type(3) {
    grid-area: unset;
  }
}

@media only screen and (width <= 969px) {
  main.l00k.--bi.--slider.__arp.w__l00k__nav article {
    grid-template-rows: 1fr 1fr min-content;
    grid-template-columns: 1fr;
  }

  main.l00k.--bi.--slider.__arp.w__l00k__nav article > section:nth-of-type(3) {
    grid-area: unset;
  }
}

main.l00k.--bi.--slider.__arp .hm__control.--rangeSlider > div h2.--longer {
  white-space: nowrap;
  font-size: clamp(2em, 7vmin, 5em);
}

#loop .bar {
  text-align: center;
  grid-template-rows: 1fr min-content;
  place-items: center;
  width: 100%;
  height: 100%;
  display: grid;
  position: absolute;
  overflow: visible;
}

#loop .bar .dot {
  background-color: var(--color-foreground);
  z-index: 111;
  width: 1em;
  height: 1em;
  transition-timing-function: easeInOut;
  animation-name: fadeIn;
  animation-delay: 2s;
  animation-duration: calc(var(--animation-step) * 3);
  border-radius: 111em;
  animation-fill-mode: both;
  display: block;
}

#loop .bar #left, #loop .bar #right {
  z-index: 11;
  background-color: color-mix(in srgb, var(--color-foreground) 100%, var(--color-foreground) 0%);
  border-radius: .25em;
  width: 5%;
  height: 25%;
  display: block;
  position: absolute;
  top: 37.5%;
  left: 47.5%;
}

@media only screen and (width <= 799px), (orientation: portrait) {
  #loop.__fan .bar .__viz {
    grid-template-columns: auto auto auto;
    align-items: center;
    display: grid;
  }
}

#loop.__fan .bar #left, #loop.__fan .bar #right {
  z-index: 11;
  top: unset;
  left: unset;
  width: clamp(10em, 40vmin, 40em);
  height: auto;
  padding: var(--space);
  background-color: #0000;
  position: relative;
}

@media only screen and (width <= 600px) {
  #loop.__fan .bar #left, #loop.__fan .bar #right {
    width: clamp(8em, 80%, 20em);
  }
}

@media only screen and (height <= 1099px) {
  #loop.__fan .bar #left, #loop.__fan .bar #right {
    width: clamp(8em, 28vmin, 20em);
  }
}

@media only screen and (width <= 899px) and (orientation: landscape) {
  #loop.__fan .bar #left, #loop.__fan .bar #right {
    width: clamp(10em, 20vmin, 20em) !important;
  }
}

@media only screen and (width >= 600px) {
  #loop.__fan .bar #left, #loop.__fan .bar #right {
    margin-bottom: -2em;
  }
}

#loop.__fan .bar #left span svg path, #loop.__fan .bar #right span svg path {
  fill: var(--color-foreground);
}

#loop.__fan .bar #left span svg #circleBG, #loop.__fan .bar #right span svg #circleBG {
  opacity: 0;
}

main.l00k .__player.__hand {
  z-index: 11;
  overflow: visible;
}

main.l00k .__player.__hand #hand {
  width: clamp(8em, 20vmin, 10em);
  height: clamp(8em, 20vmin, 10em);
  top: unset;
  position: absolute;
  bottom: 30%;
  left: 0%;
  z-index: 2222222 !important;
}

@media only screen and (width <= 99px) {
  main.l00k .__player.__hand #hand {
    left: -5%;
    bottom: -5% !important;
  }
}

.hm__control {
  width: 100%;
  max-width: clamp(3em, 80vmin, 30em);
  margin: 0 auto;
  left: 0;
}

.hm__control.--pathSlider {
  max-width: none;
}

.hm__control.--pathSlider svg {
  overflow: visible;
}

.hm__control.--pathSlider svg g.pathSliderGroup {
  filter: url("#goo2");
}

.hm__control.--pathSlider svg g.oddLine, .hm__control.--pathSlider svg g.oddLineTwo {
  visibility: hidden;
}

.hm__control.--pathSlider svg g.evenLine {
  visibility: visible;
}

.hm__control.--pathSlider svg .pathSlider__handleCircle, .hm__control.--pathSlider svg .pathSlider__trackGoo, .hm__control.--pathSlider svg .pathSlider__track__oddLineGoo {
  fill: var(--color-foreground);
}

.hm__control.--pathSlider svg .pathSlider__track__oddLineGoo {
  visibility: hidden;
}

.hm__control.--pathSlider svg .pathSlider__trackGoo {
  fill: var(--color-foreground);
}

.hm__control.--pathSlider svg .pathSlider__track, .hm__control.--pathSlider svg .pathSlider__track__oddLine {
  fill: none;
  stroke: #0000;
  stroke-width: 0;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.hm__control.--pathSlider.--oddLine g.oddLine, .hm__control.--pathSlider.--oddLine g.oddLineTwo, .hm__control.--pathSlider.--oddLine g.oddLine .pathSlider__track__oddLineGoo, .hm__control.--pathSlider.--oddLine g.oddLineTwo .pathSlider__track__oddLineGoo {
  visibility: visible;
}

.hm__control.--pathSlider.--oddLine g.evenLine {
  visibility: hidden;
}

.hm__control.--rangeSlider > div {
  min-height: 3.5em;
}

.hm__control.--rangeSlider > div h2 {
  z-index: 111;
  text-transform: uppercase;
  filter: url("#goo3");
  transform-origin: center;
  width: 100%;
  transition-timing-function: easeInOut;
  animation-name: fadeIn;
  animation-delay: 2s;
  animation-timing-function: easeInOut;
  animation-duration: calc(var(--animation-step) * 3);
  transition: transform calc(var(--animation-step) * 2) cubic-bezier(0, -.5, .5, 1), text-shadow calc(var(--animation-step) * 2) ease;
  justify-content: center;
  align-items: center;
  font-size: clamp(2em, 9vmin, 4em);
  animation-fill-mode: both;
  display: grid;
  position: absolute;
  top: calc(50% - .75em);
}

.hm__control.--rangeSlider > div h2 abbr {
  text-decoration: none;
}

.hm__control.--rangeSlider > div h2:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.hm__control.--rangeSlider > div h2.--longer {
  white-space: nowrap;
  font-size: clamp(2em, 12vmin, 5em);
}

.hm__control.--rangeSlider > div.slider__r h2, .hm__control.--rangeSlider > div.slider__l h2 {
  top: calc(50% - 1em);
}

.hm__control.--rangeSlider svg.rangeSliderSvg {
  width: 100%;
  display: block;
  overflow: visible;
}

.hm__control.--rangeSlider svg.rangeSliderSvg g.HandleGroup .HandleRect, .hm__control.--rangeSlider svg.rangeSliderSvg g.HandleGroup .HandleCircle, .hm__control.--rangeSlider svg.rangeSliderSvg g.HandleGroup .HandleRounded {
  opacity: 0;
}

.hm__control.--rangeSlider svg.rangeSliderSvg g.HandleGroup .HandleRect {
  opacity: 1;
}

.hm__control.--rangeSlider svg.rangeSliderSvg g.HandleGroup .__Handle {
  transform-origin: center;
  fill: var(--color-foreground);
}

.hm__control.--rangeSlider svg.rangeSliderSvg g.TrackGroup rect, .hm__control.--rangeSlider svg.rangeSliderSvg g.TrackGroup path {
  fill: var(--color-foreground);
}

.hm__control.--rangeSlider svg.rangeSliderSvg g.TrackGroup .TrackRect {
  visibility: hidden;
}

.hm__control.--rangeSlider svg.rangeSliderSvg g.rangeSliderGroup {
  filter: url("#gooSlider");
}

.hm__control.--rangeSlider svg.rangeSliderSvg g.arrow-group line {
  stroke: var(--color-foreground);
  stroke-width: 4px;
  stroke-dasharray: 32 4;
  stroke-dashoffset: 0;
}

.hm__control.--rangeSlider svg.rangeSliderSvg g.arrow-group path {
  fill: var(--color-foreground);
}

.arm__swinging__wind {
  filter: url("#armGoo");
}

svg#arm__svg {
  width: 30vmin;
  margin: 0 auto;
  position: absolute;
  top: calc(50% - .5em);
  left: 50%;
  transform: translate(-50%, -50%);
}

svg#arm__svg .st1 {
  opacity: 0;
}

svg#arm__svg .arm__dot, svg#arm__svg circle {
  fill: var(--color-foreground);
}

svg#arm__svg path {
  fill: var(--color-foreground--l80);
}

svg#arm__svg .arm__reach {
  stroke: var(--color-foreground--l80);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.item__shell {
  border: 2px solid color-mix(in srgb, var(--color-foreground) 100%, white 50%);
  border-radius: 3em;
}

.item__shell:before {
  border-radius: 3em;
  box-shadow: none !important;
}

.__viz {
  align-content: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  display: grid;
}

.hm__control {
  padding: 0 0 calc(var(--space) * 2) 0;
}

.hm__control.--bottom {
  padding: 0;
}

@container (width <= 699px) {
  article {
    grid-template-rows: 1fr 1fr !important;
    grid-template-columns: 1fr !important;
  }

  .__viz {
    padding: 0;
  }

  #loop.__fan .bar #left, #loop.__fan .bar #right {
    width: clamp(10em, 80%, 30em);
  }

  .__viz {
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
  }
}

@media only screen and (height <= 699px) {
  .__viz {
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
  }
}

body.__n main .l00k__nav {
  background-color: var(--color-background);
  border-left: 1px solid var(--color-user-background);
  border-left: 1px solid color-mix(in srgb, var(--color-user-background) 70%, var(--color-foreground) 95%);
}

@media only screen and (width <= 599px) {
  body.__n main .l00k__nav {
    border-left: 1px solid #0000;
  }
}

body.__n main .l00k__nav .l00k__author {
  background-color: var(--color-user-background);
  background-color: color-mix(in srgb, var(--color-user-background) 100%, var(--color-foreground) 15%);
}

body.__n main .l00k__nav h1 {
  filter: url("#goo2");
  color: var(--color-foreground);
}

body.__n main .l00k__nav ul li a {
  background-color: var(--color-white);
  color: color-mix(in srgb, var(--color-user-background) 100%, var(--color-foreground) 95%);
  box-shadow: 0 0 0em 1px color-mix(in srgb, var(--color-user-background) 0%, transparent 100%);
  text-transform: uppercase;
  background-color: #0000;
}

body.__n main .l00k__nav ul li a abbr {
  background-color: color-mix(in srgb, var(--color-user-background) 80%, var(--color-foreground) 80%);
  border-radius: calc(var(--border-radius) / 1);
  margin: 0 calc(var(--sapce) * 2) 0 var(--sapce);
}

body.__n main .l00k__nav ul li a:hover {
  color: var(--color-foreground);
  background-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-background) 100%);
  border-radius: calc(var(--border-radius) / 4) !important;
}

body.__n main .l00k__nav ul li a.--active {
  background-color: color-mix(in srgb, var(--color-foreground) 5%, var(--color-background) 100%);
  pointer-events: none;
  box-shadow: none;
  border-radius: calc(var(--border-radius) / 4) !important;
}

#hand {
  cursor: pointer;
}

#hand span {
  text-align: center;
  display: block;
}

#hand span svg {
  width: 100%;
  margin: 2em auto;
}

#hand span svg #FingersPalm {
  filter: url("#goo");
}

#hand span svg .st0 {
  fill: none;
  stroke: var(--color-foreground);
  stroke-width: 3.75px;
  stroke-miterlimit: 10;
}

#hand span svg circle, #hand span svg rect {
  fill: var(--color-foreground);
}

#hand span svg g#FingersPalmBg path {
  fill: var(--color-background);
}
/*# sourceMappingURL=index.e9c7e0ff.css.map */