.punch-code[data-v-3ca50d91]{position:relative;max-width:var(--container-width);margin:0 auto;display:grid;grid-gap:0;grid-template-areas:"smain" "sfooter";grid-template-columns:1fr;grid-template-rows:minmax(500px,auto) 50px}.punch-code main[data-v-3ca50d91]{grid-area:smain;padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.punch-code main p[data-v-3ca50d91]{font-size:24px;font-weight:700;color:#1d04b4}.punch-code main .fail[data-v-3ca50d91]{color:red;margin-bottom:1em}.punch-code main .fail span[data-v-3ca50d91]{text-decoration:underline;cursor:pointer}.punch-code main .demo[data-v-3ca50d91]{margin-top:auto;padding:10px;max-width:500px;background-color:hsla(0,0%,100%,.7)}.punch-code main .demo h5[data-v-3ca50d91]{font-size:1rem;margin-bottom:.7em}.punch-code .code-field[data-v-3ca50d91]{font-family:Roboto Mono,monospace;padding-left:10px;letter-spacing:37px;font-size:39px;border:0;background-image:-webkit-gradient(linear,right top,left top,color-stop(70%,#e2e8ff),color-stop(0,hsla(0,0%,100%,0)));background-image:linear-gradient(270deg,#e2e8ff 70%,hsla(0,0%,100%,0) 0);background-position:bottom;background-size:60px 100%;background-repeat:repeat-x;background-position-x:-18px;background-color:transparent;width:282px;min-width:282px;margin-bottom:.5em;color:#1d04b4}.punch-code .code-field[data-v-3ca50d91]:focus{outline:none}.punch-code .code-field.fail[data-v-3ca50d91]{background-image:-webkit-gradient(linear,right top,left top,color-stop(70%,#fce4e4),color-stop(0,hsla(0,0%,100%,0)));background-image:linear-gradient(270deg,#fce4e4 70%,hsla(0,0%,100%,0) 0)}.punch-code .inner[data-v-3ca50d91]{left:0;position:-webkit-sticky;position:sticky}.punch-code .outer[data-v-3ca50d91]{width:282px;overflow:hidden}.punch-code footer[data-v-3ca50d91]{grid-area:sfooter}.punch-code aside[data-v-3ca50d91]{grid-area:saside;background-color:#c9c9c9;overflow:hidden;position:relative}.punch-code .to-qr[data-v-3ca50d91]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-decoration:none;color:#1d04b4}.punch-code .to-qr i[data-v-3ca50d91]{margin-right:10px}.punch-code .background[data-v-3ca50d91]{z-index:-1;position:absolute;bottom:0;right:0;width:70%}