:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-size: 4vw;
}
@media (min-width: 400px) {
  :root {
    font-size: 16px;
  }
}
:root {
  background: #555;
  color: white;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

input, button, textarea, select {
  font: inherit;
}

#g-signin2, .g_id_signin {
  position: fixed;
  top: 1rem;
  right: 1rem;
}.ds3-widget[data-v-ac66e0f4] {
  --btn-color: #777778;
  --gamepad-bg: #c2c1c1;
  --backface-bg: #b0afaf;
  --gamepad-front-bg: #e5e5e4;
  --stick-ring: #cbc9c9;
  width: 100%;
}
.ds3-widget.connected .connection-status[data-v-ac66e0f4] {
  fill: royalblue;
  filter: drop-shadow(0 -2px 3px royalblue);
}
.parts[data-v-ac66e0f4] {
  user-select: none;
}
.parts .backface[data-v-ac66e0f4] {
  fill: var(--backface-bg);
}
.parts .holder[data-v-ac66e0f4], .parts .shoulder[data-v-ac66e0f4] {
  fill: var(--gamepad-bg);
}
.parts .shoulder[data-v-ac66e0f4] {
  cursor: pointer;
}
.parts .shoulder.pressed[data-v-ac66e0f4], .parts .shoulder[data-v-ac66e0f4]:active {
  fill: var(--btn-color);
}
.parts .shoulder.triggered[data-v-ac66e0f4] {
  transform: translateY(8px);
}
.parts .front[data-v-ac66e0f4] {
  fill: var(--gamepad-front-bg);
}
.parts .btn[data-v-ac66e0f4] {
  fill: var(--btn-color);
  cursor: pointer;
}
.parts .btn.pressed[data-v-ac66e0f4], .parts .btn[data-v-ac66e0f4]:active {
  fill: color-mix(in srgb, var(--btn-color), black 30%);
}
.parts .stick .ring[data-v-ac66e0f4] {
  fill: var(--stick-ring);
}
.parts .abxy .symbol[data-v-ac66e0f4] {
  pointer-events: none;
}
.parts .abxy .symbol.triangle[data-v-ac66e0f4] {
  fill: #7AC493;
}
.parts .abxy .symbol.equis[data-v-ac66e0f4] {
  fill: #57C0EB;
}
.parts .abxy .symbol.circle[data-v-ac66e0f4] {
  fill: #E776AA;
}
.parts .abxy .symbol.square[data-v-ac66e0f4] {
  fill: #CE7FB2;
}
.parts .connection-status[data-v-ac66e0f4] {
  fill: var(--gamepad-bg);
}[connecting-state][data-v-3fffa787], [default-state][data-v-3fffa787] {
  text-align: center;
  padding: 1rem;
  color: light-dark(#c2c1c1, #333);
}
[current-device][data-v-3fffa787] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
}
[current-device] [refresh-button][data-v-3fffa787], [current-device] [disconnect-button][data-v-3fffa787] {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
[current-device] [refresh-button] svg[data-v-3fffa787], [current-device] [disconnect-button] svg[data-v-3fffa787] {
  display: block;
  width: 24px;
}
[current-device] [refresh-button]:hover svg[data-v-3fffa787] {
  color: royalblue;
}
[current-device] [refresh-button] svg[data-v-3fffa787], [current-device] [refresh-button]:active svg[data-v-3fffa787] {
  color: color-mix(in srgb, royalblue 60%, light-dark(white, grey));
}
[current-device] [disconnect-button]:hover svg[data-v-3fffa787] {
  color: firebrick;
}
[current-device] [disconnect-button] svg[data-v-3fffa787], [current-device] [disconnect-button]:active svg[data-v-3fffa787] {
  color: color-mix(in srgb, firebrick 60%, light-dark(white, grey));
}
[sixaxis-connect][data-v-3fffa787] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
}
[sixaxis-connect] svg[data-v-3fffa787] {
  width: 100%;
}
[sixaxis-connect] [actions][data-v-3fffa787] {
  position: absolute;
  bottom: 0;
  width: 60%;
  aspect-ratio: 4/1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  line-height: 1;
}
[sixaxis-connect] [actions][data-v-3fffa787] > * {
  flex: 1 1 auto;
}
[sixaxis-connect] [actions] [product-name][data-v-3fffa787] {
  color: var(--text-bold-color);
}
[sixaxis-connect] [actions] [self-mac-address][data-v-3fffa787] {
  text-align: center;
  font-size: 0.9rem;
  color: #777;
}
[sixaxis-connect] [actions] [connected-data][data-v-3fffa787] {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.25em;
  background: light-dark(#eee, #222);
  padding: 0.5em 1em;
  border-radius: 1em;
  color: light-dark(black, white);
}
[sixaxis-connect] [actions] [paired-mac-address][data-v-3fffa787] {
  text-align: center;
  color: light-dark(black, white);
}
[sixaxis-connect] [actions] [btn][data-v-3fffa787] {
  width: 100%;
  height: 2.5rem;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  color: white;
}
[sixaxis-connect] [actions] [btn][data-v-3fffa787]:hover {
  background: color-mix(in srgb, royalblue 80%, black);
}
[sixaxis-connect] [actions] [btn][data-v-3fffa787], [sixaxis-connect] [actions] [btn][data-v-3fffa787]:active {
  background: royalblue;
}[register-in-sixaxis][data-v-1d1c98d1] {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
}
[register-in-sixaxis] button[data-v-1d1c98d1] {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
[register-in-sixaxis] svg[data-v-1d1c98d1] {
  display: block;
  width: 4rem;
  color: light-dark(#333, #c2c1c1);
}
[register-in-sixaxis] button:hover svg[data-v-1d1c98d1] {
  color: royalblue;
}
[register-in-sixaxis] button[disabled][data-v-1d1c98d1] {
  cursor: not-allowed;
}
[register-in-sixaxis] button[disabled] svg[data-v-1d1c98d1] {
  color: light-dark(#aaa, #555);
}[input-group][data-v-f5d27311] {
  display: flex;
  flex-direction: column;
  position: relative;
  background: white;
  border: 1px solid light-dark(#444, #ccc);
  border-radius: 4px;
}
[input-group] [inputs][data-v-f5d27311] {
  display: flex;
}
[input-group] input[data-v-f5d27311] {
  flex: 1 1 auto;
  appearance: none;
  border: none;
  outline: none;
  padding: 24px 12px 4px;
  font-size: 1rem;
  background: transparent;
  color: black;
  height: 48px;
}
[input-group] [label][data-v-f5d27311] {
  position: absolute;
  top: 4px;
  left: 0;
  font-size: 14px;
  color: #333;
  padding: 0 12px;
  font-size: 75%;
}
[input-group][data-v-f5d27311]:focus-within {
  border-color: royalblue;
  box-shadow: 0 0 0 2px light-dark(rgba(65, 105, 225, 0.2), rgba(65, 105, 225, 0.4));
}
[input-group]:focus-within [label][data-v-f5d27311] {
  color: royalblue;
  font-weight: bold;
}
[new-target-action][data-v-f5d27311] {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  color: white;
}
[new-target-action][label][data-v-f5d27311] {
  color: #c2c1c1;
}
[new-target-action][add-button] button[data-v-f5d27311] {
  appearance: none;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  color: white;
  cursor: pointer;
}
[new-target-action][add-button] button[data-v-f5d27311]:hover {
  background: color-mix(in srgb, royalblue 96%, white);
}
[new-target-action][add-button] button[data-v-f5d27311], [new-target-action][add-button] button[data-v-f5d27311]:active {
  background: royalblue;
}
[blueretro-icon][data-v-f5d27311] {
  display: flex;
  align-items: center;
  padding: 6px;
}
[blueretro-icon] img[data-v-f5d27311] {
  height: 28px;
}
[devices-list][data-v-f5d27311] {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
}
[devices-list] [device-item][data-v-f5d27311] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-left: 0.25rem solid transparent;
}
[devices-list] [device-item].selected[data-v-f5d27311] {
  border-color: royalblue;
  background: rgba(255, 255, 255, 0.05);
}
[devices-list] [device-item] + [device-item][data-v-f5d27311] {
  border-top: 1px solid #777;
}
[devices-list] [device-item][data-v-f5d27311]:hover {
  background: rgba(255, 255, 255, 0.1);
}
[devices-list] [device-info][data-v-f5d27311] {
  padding: 0.5rem;
}
[devices-list] [remove-btn][data-v-f5d27311] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: color-mix(in srgb, firebrick 30%, light-dark(white, grey));
}
[devices-list] [remove-btn][data-v-f5d27311]:hover {
  color: firebrick;
  background: rgba(255, 255, 255, 0.4);
}
[devices-list] [remove-btn][data-v-f5d27311]:active {
  background: transparent;
}
[devices-list] [remove-btn] svg[data-v-f5d27311] {
  height: 16px;
  width: 16px;
}
[load-blueretro][data-v-f5d27311] {
  padding: 6px;
}
[load-blueretro] button[data-v-f5d27311] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 12px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  color: white;
  filter: grayscale(100%) brightness(150%);
  background: dimgray;
}
[load-blueretro] button[data-v-f5d27311]:hover, [load-blueretro] button[data-v-f5d27311]:focus {
  filter: none;
  background: royalblue;
}
[load-blueretro] button[data-v-f5d27311]:active {
  background: dimgray;
}
[load-blueretro] button .bluetooth[data-v-f5d27311] {
  height: 24px;
}
[load-blueretro] button .blueretro[data-v-f5d27311] {
  height: 28px;
}button[color-scheme-selector][data-v-95bd5443] {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: light-dark(#333, #c2c1c1);
  background-color: light-dark(#eee, #444);
}
button[btn-login-google][data-v-95bd5443] {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 1000;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
main[data-v-95bd5443] {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main section[connection][data-v-95bd5443] {
  background-color: light-dark(#fff, #333);
  color: light-dark(#333a3e, white);
  padding: 6rem 1rem 0;
}
@media (min-width: 840px) and (max-width: 1200px) {
main section[connection][data-v-95bd5443] {
    padding-top: 12vw;
}
}
@media (min-width: 1200px) {
main section[connection][data-v-95bd5443] {
    padding-top: 9rem;
}
}
main section[connection] [padding-bottom][data-v-95bd5443] {
  padding-bottom: 2rem;
}
main section[bluetooth-selector][data-v-95bd5443] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 1rem 0;
}
main [container][data-v-95bd5443] {
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
}
main [paired-notification][data-v-95bd5443] {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
}
footer[data-v-95bd5443] {
  position: sticky;
  bottom: 0;
  text-align: center;
  padding: 10px 0;
}
footer a[data-v-95bd5443] {
  color: #ddd;
}