= 1) {
$event.target.value = $event.target.value.slice(0, 1);
digits[0] = $event.target.value;
$refs.digit1.focus(); }
"
@keydown.backspace="
if ($event.target.value.length === 0) {
}
"
class="w-12 h-16 md:w-14 md:h-20 bg-surface-container-low border border-surface-dim rounded-lg text-center text-label-mono font-label-mono text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 shadow-[inset_0px_4px_8px_rgba(0,0,0,0.05)] transition-all"
>
= 1) {
$event.target.value = $event.target.value.slice(0, 1);
digits[1] = $event.target.value;
$refs.digit2.focus(); }
"
@keydown.backspace="
if ($event.target.value.length === 0) {
$refs.digit0.focus(); }
"
class="w-12 h-16 md:w-14 md:h-20 bg-surface-container-low border border-surface-dim rounded-lg text-center text-label-mono font-label-mono text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 shadow-[inset_0px_4px_8px_rgba(0,0,0,0.05)] transition-all"
>
= 1) {
$event.target.value = $event.target.value.slice(0, 1);
digits[2] = $event.target.value;
$refs.digit3.focus(); }
"
@keydown.backspace="
if ($event.target.value.length === 0) {
$refs.digit1.focus(); }
"
class="w-12 h-16 md:w-14 md:h-20 bg-surface-container-low border border-surface-dim rounded-lg text-center text-label-mono font-label-mono text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 shadow-[inset_0px_4px_8px_rgba(0,0,0,0.05)] transition-all"
>
-
= 1) {
$event.target.value = $event.target.value.slice(0, 1);
digits[3] = $event.target.value;
$refs.digit4.focus(); }
"
@keydown.backspace="
if ($event.target.value.length === 0) {
$refs.digit2.focus(); }
"
class="w-12 h-16 md:w-14 md:h-20 bg-surface-container-low border border-surface-dim rounded-lg text-center text-label-mono font-label-mono text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 shadow-[inset_0px_4px_8px_rgba(0,0,0,0.05)] transition-all"
>
= 1) {
$event.target.value = $event.target.value.slice(0, 1);
digits[4] = $event.target.value;
$refs.digit5.focus(); }
"
@keydown.backspace="
if ($event.target.value.length === 0) {
$refs.digit3.focus(); }
"
class="w-12 h-16 md:w-14 md:h-20 bg-surface-container-low border border-surface-dim rounded-lg text-center text-label-mono font-label-mono text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 shadow-[inset_0px_4px_8px_rgba(0,0,0,0.05)] transition-all"
>
= 1) {
$event.target.value = $event.target.value.slice(0, 1);
digits[5] = $event.target.value;
}
"
@keydown.backspace="
if ($event.target.value.length === 0) {
$refs.digit4.focus(); }
"
class="w-12 h-16 md:w-14 md:h-20 bg-surface-container-low border border-surface-dim rounded-lg text-center text-label-mono font-label-mono text-on-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 shadow-[inset_0px_4px_8px_rgba(0,0,0,0.05)] transition-all"
>