.palmcapture .preview {
    position: relative;
    max-width: 100%;
    aspect-ratio: 3 / 4;
}

.palmcapture video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.palmcapture.user-facing video {
    transform: scale(-1, 1);
}

.palmcapture .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.palmcapture .overlay.ok,
.palmcapture .overlay.waiting,
.palmcapture .overlay.error {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 1em;
    font-size: 2em;
    font-family: 'Bricolage Grotesque', serif;
    text-align: center;
}

.palmcapture .overlay.error {
    background-color: #ff000066;
}

.palmcapture .overlay.waiting {
    background-color: #00000066;
}

.palmcapture .overlay.ok {
    background-color: #00863866;
}

.palmcapture.hand-any .overlay.hand {
    background-image: url('/img/hand-mask.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

.palmcapture.hand-left .overlay.hand,
.palmcapture.hand-right .overlay.hand {
    background-image: url('/img/hand-outline-left.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

.palmcapture.user-facing.hand-left .overlay.hand,
.palmcapture.hand-right .overlay.hand {
    transform: scale(-1, 1);
}

.palmcapture.user-facing.hand-right .overlay.hand {
    transform: scale(1, 1);
}

.palmcapture .gesture {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.palmcapture.user-facing.hand-left .gesture,
.palmcapture.hand-right .gesture {
    transform: scale(-1, 1);
}

.palmcapture.user-facing.hand-right .gesture {
    transform: scale(1, 1);
}

.palmcapture .gesture.back {
    background-image: url('/img/gesture-icons/back.svg');
}

.palmcapture .gesture.circle {
    background-image: url('/img/gesture-icons/circle.svg');
}

.palmcapture .gesture.fist {
    background-image: url('/img/gesture-icons/fist.svg');
}

.palmcapture .gesture.four {
    background-image: url('/img/gesture-icons/four.svg');
}

.palmcapture .gesture.l {
    background-image: url('/img/gesture-icons/l.svg');
}

.palmcapture .gesture.paper {
    background-image: url('/img/gesture-icons/paper.svg');
}

.palmcapture .gesture.pointing {
    background-image: url('/img/gesture-icons/pointing.svg');
}

.palmcapture .gesture.scissors {
    background-image: url('/img/gesture-icons/scissors.svg');
}

.palmcapture .gesture.three {
    background-image: url('/img/gesture-icons/three.svg');
}

.palmcapture .gesture.thumbsUp {
    background-image: url('/img/gesture-icons/thumbsUp.svg');
}

.palmcapture .gesture.doubleL {
    background-image: url('/img/gesture-icons/doubleL.svg');
}

.palmcapture .gesture.shake {
    background-image: url('/img/gesture-icons/shaka.svg');
}

.palmcapture .guide {
    text-align: center;
    font-size: 0.875em;
    padding: 1em 3.8125em;
}

.palmcapture .guide svg {
    width: 3.625em;
    height: 3.875em;
    display: block;
    margin: 0 auto 1em auto;
}

.palmcapture.error .guide svg {
    color: #ff5757;
}

.palmcapture.warning .guide svg {
    color: #579dff;
}

.palmcapture.ok .guide svg {
    color: #57ff7e;
}

.palmcapture.user-facing.hand-left .guide svg,
.palmcapture.hand-right .guide svg {
    transform: scale(-1, 1);
}

.palmcapture.user-facing.hand-right .guide svgn {
    transform: scale(1, 1);
}

.palmcapture .hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

.palmcapture .hint>p {
    display: inline-block;
    background-color: #000000a3;
    border-radius: 2em;
    border-width: 1px;
    border-style: solid;
    padding: 0.5em 1em;
}

.palmcapture .hint>p.ok {
    border-color: #57ff7ea3;
    color: #57ff7e;
}

.palmcapture .hint>p.warning {
    border-color: #579dffa3;
    color: #579dff;
}

.palmcapture .hint>p.error {
    border-color: #ff5757a3;
    color: #ff5757;
}